Breakpoint retransmission principle
At present, there are two commonly used methods for resuming breakpoints. One is to upload files through the websocket interface, and the other is through ajax. Both methods have their own advantages. Although websocket sounds more high-end, it uses different ones. The other algorithms outside the protocol are basically similar, and the server needs to open the ws interface. Here, the relatively convenient ajax is used to illustrate the idea of uploading the breakpoint.
To put it bluntly, the core content of the breakpoint is to "slice" the file and then pass it to the server one by one, but this seemingly simple upload process has countless pits.
The first is the identification of the file. After a file is divided into several parts, how to tell the server how many blocks you cut, and how the final server should merge the files you uploaded, are all considered.
So before the file starts uploading, we have a "handshake" process with the server, telling the server the file information, and then agreeing with the server on the size of the slice. When the server reaches a consensus, it can start the subsequent file transfer.
The front desk should pass each piece of file to the background. After the success, the front end and the back end should be identified for subsequent breakpoints.
When the file transfer is interrupted, the user can select the file again to determine whether the file has been uploaded by the identifier. If so, then we can continue to transfer the file after the last progress to achieve the function of the resume.
Front end slice of the file
Cutting files with HTML5's File api is much simpler than you think.
Just use the slice method.
var packet = file.slice(start, end);The parameter start is the position at which the slice is started, and the end is the position at which the slice ends. The units are all bytes. By controlling start and end, you can implement chunking of the file.
Such as:
file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......File fragment upload
In the previous section, we divided the file into several blocks by the slice method. The next thing to do is to transfer the fragments to the server.
Here we use ajax post request to achieve
var xhr = new XMLHttpRequest();
var url = xxx // The address of the file upload can include the parameters of the file, such as the file name, the number of blocks, etc., for background processing.
xhr.open('POST', url, true);
xhr.onload = function (e){
// Determine whether the file is uploaded successfully. If you continue to upload the next piece, if you fail, try again.
}
xhr.upload.onprogress = function(e){
// If the file size is large, you can use this method to determine the specific upload progress of the single file.
// e.loaded How much has the file been uploaded?
// e.totalSize The total size of the file
}
xhr.send(packet);After the file is uploaded to the background, the background program such as PHP will handle it accordingly.
