包含文件名的XMLHttpRequest下载(JS)

时间:2018-06-07 23:04:39

标签: javascript

我试图在此下载脚本中包含两个函数,但我无法使其工作

1-在下载结束时(动画下载栏),在示例浏览器中自动开始下载:window.open ()。 但这包括脚本中的默认名称。

2-当检测到死链接或大小为0字节时,如果可能,request.open ()会发出警告。

任何帮助都非常有用,问候。



var _OBJECT_URL;


document.querySelector('#download-button').addEventListener('click', function() {
	var request = new XMLHttpRequest();
    request.addEventListener('readystatechange', function(e) {
    	if(request.readyState == 2 && request.status == 200) {
    		document.querySelector('#start-download').style.display = 'block';
    		document.querySelector('#download-button').style.display = 'none';
    	}
    	else if(request.readyState == 3) {
    		document.querySelector('#download-progress-container').style.display = 'block';
    		document.querySelector('#start-download').style.display = 'none';
    	}
    	else if(request.readyState == 4) {





    		_OBJECT_URL =  URL.createObjectURL(request.response);



document.querySelector('#save-file').setAttribute('href', _OBJECT_URL);

// NAME default 
document.querySelector('#save-file').setAttribute('download', 'MyNameFile.zp');
    		// OPEN FILE IN BROWSER

//Open file, start download automatically sample: window.open(_OBJECT_URL)
// and that includes the default name "MyFilename.zip"

    

    	


document.querySelector('#save-file').style.display = 'block';







    		document.querySelector('#download-progress-container').style.display = 'none';

    		setTimeout(function() {
    			window.URL.revokeObjectURL(_OBJECT_URL);

    			document.querySelector('#download-button').style.display = 'block';
    			document.querySelector('#save-file').style.display = 'none';
    		}, 60*1000);
    	}
    });
    request.addEventListener('progress', function(e) {
    	var percent_complete = (e.loaded / e.total)*100;
    	document.querySelector('#download-progress').style.width = percent_complete + '%';
    });


    request.responseType = 'blob';
    request.open('get', 'https://www.google.com.sv/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png'); 
    request.send(); 


// HERE NOTICE DEAD LINK

//If the link is dead, notify with some notice


});

body {
	margin: 0;
	font-family: "Titillium Web";
	font-size: 15px;
}

#demo-container {
	width: 400px;
	margin: 60px auto;
}

#download-button {
	background-color: white;
	color: #2980b9;
	border: 2px solid #2980b9;
	font-family: inherit;
	outline: none;
	min-width: 100px;
	padding: 10px;
	font-size: inherit;
	border-radius: 2px;
	cursor: pointer;
	display: block;
	margin: 0 auto;
}

#start-download {
	text-align: center;
	display: none;
}

#download-progress-container {
	border: 1px solid #cccccc;
	padding: 4px;
	display: none;
	height: 20px;
}

#download-progress {
	background-color: #2980b9;
	display: inline-block;
	height: 100%;
}

#save-file {
	color: #2980b9;
	text-decoration: none;
	display: none;
	text-align: center;
}

#save-file:hover {
	text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<body>

<div id="demo-container">
	<button id="download-button">Download</button>
	<div id="download-ui-container">
		<div id="start-download">Starting Download..</div>
		<div id="download-progress-container"><div id="download-progress"></div></div>
		<a  id="save-file">Save File</a>




	</div>
</div>
&#13;
&#13;
&#13;

0 个答案:

没有答案