JavaScript Fileセグメントアップロード

HTML

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;
}
　　//        
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){
 if(end==size){
 var backtext=xmlhttp.responseText;
 alert(backtext);
 }else{
 alert("     "+i+" ")
 start=end;
 chunk_upload(button);
 }
 }else{
 alert("    ");
 chunk_upload(button);
 }
} 

主な考え:
注意カットの開始位置とカットサイズを設定し、XMLHttpRequestによる送信要求(httpプロトコルはご存知です).
いくつかのタグデータがプロトコルヘッダを追加できる場合:xmlhttp.set Request Header(「end」,end);
プロトコル体xmlhtp.sendを送信します.
リターンコードを傍受して、転送が成功したかどうかを判断し、次のステップで動作します.
カット位置を再設定し、再度自分のスタント=endを呼び出します.chunk_upload(button)
注意:
カットのstartとendとfilesizeの関係
ファイルを非同期でアップロードし、アップロードの進捗を返します.
純粋なjsは非同期アップロードファイルを実現し、非同期でファイルアップロードの進捗度を返します.0.05から0.1秒でアップロードの進捗度を変更します.他の詳細はコードのセグメントのコメントを参照してください.
1.簡単な非同期アップロード関数

;(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) {
}
});