With the help of JS Blob object Formdata object can realize large file multipart upload function, the specific use of BLOB and formdata can go to the following address to see
Use of FormData objects
Use of Blob objects
The following is the implementation code, in this case, the back-end code is implemented using PHP, just to demonstrate the basic functionality, specific file validation logic is ignored.
Previous section code:
<! DOCTYPE html>varBytesperpiece = 1024 * 1024;//Each file slice size is set to 1MB. vartotalpieces; //Send Request functionupload () {varBlob = document.getElementById ("file"). files[0]; varStart = 0; varend; varindex = 0; varFileSize =blob.size; varfilename =Blob.name; //calculate the total number of file slicesTotalpieces = Math.ceil (FileSize/bytesperpiece); while(Start <filesize) {End= Start +bytesperpiece; if(End >filesize) {End=filesize; } varChunk = Blob.slice (start,end);//Cutting Files varsliceindex= Blob.name +index; varFormData =NewFormData (); Formdata.append ("File", chunk, filename); $.ajax ({URL:' Http://localhost:9999/test.php ', type:' POST ', Cache:false, Data:formdata, ProcessData:false, ContentType:false, }). Done (function(res) {}). Fail (function(res) {}); Start=end; Index++; } } </script></body>Back-end PHP code:
<? PHP Header (' access-control-allow-origin:* '); Header ("Access-control-allow-headers:origin, X-requested-with, Content-type, Accept"); $file $_files [' file ']; $filename $file [' name ']; file_put_contents ($filenamefile_get_contents($file[' tmp_name ']), file_append);
JS implementation of large file multipart upload method