Conseils pour le téléchargement de fichiers JavaScript en plusieurs parties_javascript

HTML

<form method="POST" name="form" action="/mupload/upload/" enctype="multipart/form-data">
<input type='hidden' name='csrfmiddlewaretoken' value='' />
<input id='file' type='file' name='file' onchange="" />
<input id='button' name='submit' type='button' value="上传" onclick="chunk_upload(this)"/>
</form> 

Méthode js

var fileSplitSize = 1024 * 1024;
var start=0,end=0;
var i=0;
// 文件段上传
function chunk_upload(button){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST", "/chunk_upload/upload/", false);
xmlhttp.setRequestHeader("X-CSRFToken", button.form['csrfmiddlewaretoken'].value);
var f = button.form;
var file = f['file']['files'][0];
var size=file.size;
end=start+fileSplitSize;
if(end>size){
i=-1;
end=size;
}else{
i+=1;
end=end;
}<br>　　//按大小切割文件段
var blob = file.slice(start, end);
xmlhttp.setRequestHeader('charset','utf-8');
xmlhttp.setRequestHeader("fileMD5", fileMD5);
xmlhttp.setRequestHeader("start", start);
xmlhttp.setRequestHeader("end", end);
xmlhttp.send(blob);
if(xmlhttp.status==200){<br> if(end==size){<br> var backtext=xmlhttp.responseText;<br> alert(backtext);<br> }else{<br> alert("上传完成第"+i+"段")<br> start=end;<br> chunk_upload(button);<br> }<br> }else{<br> alert("上传错误");<br> chunk_upload(button);<br> }
} 

Idée principale :

Faites attention à définir la position de départ et la taille de découpe de la découpe, et envoyez la demande via XMLHttpRequest (vous devez connaître le protocole http).

Si vous disposez de données de balisage, vous pouvez ajouter un en-tête de protocole : xmlhttp.setRequestHeader("end", end);

Envoyer le corps du protocole xmlhttp.send(data);

Surveillez le code retour pour déterminer si le transfert a réussi et passez à l'étape suivante.

Réinitialisez la position de coupe puis appelez-le récursivement start=end;chunk_upload(button);

Remarque :

La relation entre le début, la fin et la taille du fichier

Pure js télécharge les fichiers de manière asynchrone et renvoie la progression du téléchargement

Pure JS implémente le téléchargement de fichiers asynchrone, renvoie la progression du téléchargement de fichiers de manière asynchrone et rappelle la progression du téléchargement une fois toutes les 0,05 à 0,1 secondes. Pour d'autres détails, veuillez consulter les notes d'utilisation sous l'extrait de code

.

1. Fonction de téléchargement asynchrone simple

;(function(window,document){
var myUpload = function(option) {
var file,
fd = new FormData(),
xhr = new XMLHttpRequest(),
loaded, tot, per, uploadUrl,input;
input = document.createElement("input");
input.setAttribute('id',"myUpload-input");
input.setAttribute('type',"file");
input.setAttribute('name',"files");
input.click();
uploadUrl = option.uploadUrl;
callback = option.callback;
uploading = option.uploading;
beforeSend = option.beforeSend;
input.onchange= function(){
file = input.files[0];
if(beforeSend instanceof Function){
if(beforeSend(file) === false){
return false;
}
}
fd.append("files", file);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
if(callback instanceof Function){
callback(xhr.responseText);
}
}
}
//侦查当前附件上传情况
xhr.upload.onprogress = function(evt) {
loaded = evt.loaded;
tot = evt.total;
per = Math.floor(100 * loaded / tot); //已经上传的百分比
if(uploading instanceof Function){
uploading(per);
}
};
xhr.open("post", uploadUrl);
xhr.send(fd);
}
};
window.myUpload = myUpload;
})(window,document);
//用法
//触发文件上传事件
myUpload({
//上传文件接收地址
uploadUrl: "/async/myUpload.php",
//选择文件后，发送文件前自定义事件
//file为上传的文件信息，可在此处做文件检测、初始化进度条等动作
beforeSend: function(file) {
},
//文件上传完成后回调函数
//res为文件上传信息
callback: function(res) {
},
//返回上传过程中包括上传进度的相关信息
//详细请看res,可在此加入进度条相关代码
uploading: function(res) {
}
});