slice large file into chunks and upload using ajax and html5 FileReader

Question

What I want to implement is:

In the front end, I use the html5 file api to read the file, and then upload the file\'s content to the php backend using ajax, and it\'

Answer 1

There is a small error in your js script I noticed that the reader.onprogress event is triggered more times than the xhr load event. In this case some chunks are skipped. Try to increment the loaded variable inside the load function.

function uploadFile(file){
var loaded = 0;
var step = 1024*1024;
var total = file.size;
var start = 0;
var progress = document.getElementById(file.name).nextSibling.nextSibling;

var reader = new FileReader();

reader.onload = function(e){
        var xhr = new XMLHttpRequest();
        var upload = xhr.upload;
        upload.addEventListener('load',function(){
        loaded += step;
        progress.value = (loaded/total) * 100;
                if(loaded <= total){
                        blob = file.slice(loaded,loaded+step);

                        reader.readAsBinaryString(blob);
                }else{
                        loaded = total;
                }
        },false);
        xhr.open("POST", "upload.php?fileName="+file.name+"&nocache="+new Date().getTime());
        xhr.overrideMimeType("application/octet-stream");
        xhr.sendAsBinary(e.target.result);
};
var blob = file.slice(start,step);
reader.readAsBinaryString(blob); }

Answer 2

• Using the readAsBinaryString fn is just bad practice
• SendAsBinary is also depricated
• Reading the chunks content is just pure dum. Slicing them is enough. xhr.send(blob.slice(0,10))
• Slicing is also unnecessary unless the server don't accept such large files (such as dropbox limited REST API)
• So if anyone trying to be smart about using worker threads, base64 or FileReader for uploading large files - don't do that, it's all unnecessary.

Only time it's okey to read/slice the file is if you are deciding to encrypt/decrypt/zip the files before sending it to the server.
But only for a limited time until all browser start supporting streams.
Then you should take a look at fetch and ReadableStream

fetch(url, {method: 'post', body: new ReadableStream({...})})

---

if you just need to forward the blob to the server, just do: xhr.send(blob_or_file) and the browser will take care of reading it (correctly) and not consume any memory. And the file can be however large the file/blob is

Answer 3

This Problem is caused mostly by global restrictions of shared Hosts. They often control the amount of data and drop the Connection if Limit is overridden. I tried this several times and several ways. Always stucking at the same Position. target file was smaller and corrupted. Even taking a smaller file for upload than this size, so that the merged data fits in the limit, the result was OK. YOu have only one Chance: Get the max size increased, for files to be opened. Every time you open the target file and write the chunk Content into it, and the size overrides the Limit, the hoster will break the Connection. Example hoster: Strato Here the Limit is globally set to 16MB. I get max merge-result size double this size. No Chance to override it.