JavaScriptFile multipart upload _ javascript skills

This article mainly introduces the information about JavaScriptFile multipart upload. For more information, see HTML

Js Method

Var fileSplitSize = 1024*1024; var start = 0, end = 0; var I = 0; // file segment upload 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 ;}
// Cut the file segment var blob = file by size. 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 ("uploaded" + I + "section ")
Start = end;
Chunk_upload (button );
}
} Else {
Alert ("Upload error ");
Chunk_upload (button );
}}

Main ideas:

Pay attention to setting the start position and cut size of the cut, and send the request through XMLHttpRequest (http protocol should be known ).

If some data is marked, you can add the protocol header xmlhttp. setRequestHeader ("end", end );

Sending protocol body xmlhttp. send (data );

Listen to the return code to determine whether the transfer is successful. Proceed to the next step.

Reset the cutting position and call start = end recursively; chunk_upload (button );

Note:

Relationship Between Cut start and end and filesize

Upload files asynchronously in pure js and return the upload progress

Upload files asynchronously in pure js, return the upload progress asynchronously, and call back the upload progress from 0.05 to 0.1 seconds. For more information, see the usage comments in the code snippet.

1. Simple asynchronous upload function

; (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) ;}}// detects the current attachment upload status xhr. upload. onprogress = function (evt) {loaded = evt. loaded; tot = evt. total; per = Math. floor (100 * loaded/tot); // percentage of uploaded items if (uploading instanceof Function) {uploading (per) ;}}; xhr. open ("post", uploadUrl); xhr. send (fd) ;}}; window. myUpload = myUpload;}) (window, document); // usage // trigger the File Upload event myUpload ({// Upload File Receiving address uploadUrl: "/async/myUpload. php ", // After selecting a file, customize the event before sending the file // file is the information of the uploaded file, where you can perform file detection, initialization progress bar, and other actions beforeSend: function (file) {}, // callback function after the file is uploaded // res indicates the file upload information callback: function (res ){}, // return the upload progress information contained in the upload process. // For details, see res. You can add the progress bar code uploading: function (res) {}}) here ){}});