» » Implementation of file breakpoint resume by HTML5


Implementation of file breakpoint resume by HTML5

Author: bamboo06 on 31-01-2019, 22:10, views: 104

HTML5's FILE api has a slice method that splits the BLOB object. The front end obtains the corresponding file through the FileList object, segments the large file according to the specified splitting manner, and then passes it to the back end one by one, and then the back end then splicing the files in a sequence.

Implementation of file breakpoint resume by HTML5

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 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

After the file is uploaded to the background, the background program such as PHP will handle it accordingly.

Category: Javascript / HTML5

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
  • 0 Articles
1 February 2019 09:42


  • Group: Guests
  • –†Registered date: --
  • Status:
# Amos 17.01.2019 11:25
I look in on day-to-day a exclusively a insistent ensnare pages and websites to know buoy up, but this
webpage offers pomp based articles.

Comment on the news site is possible only within (days) days from the date of publication.