HTML5 implements resumable file transfer,

HTML5 implements resumable file transfer,

HTML5 FILE api, which has a slice method that can split BLOB objects. The front-end obtains the corresponding file through the FileList object, segments the large file according to the specified segmentation method, and transmits the file to the backend in a segment, and then Concatenates the file in the sequence segment.

Resumable upload Principle

Currently, two methods are commonly used for resumable upload. One is to upload files through the websocket interface, and the other is to use ajax, although websocket sounds more advanced, other algorithms except for using different protocols are basically similar, and the server must enable the ws interface, here we use ajax to illustrate the idea of resumable upload.

To put it bluntly, the core of resumable upload is to "slice" the file and send it to the server one by one. However, this seemingly simple upload process has countless pitfalls.

The first is File identification. After a file is divided into several parts, how can we tell the server how many parts you have cut and how the server should merge the files you uploaded, this is all to consider.

Therefore, before uploading a file, we need to shake hands with the server, tell the server the file information, and then agree on the slice size with the server, after reaching a consensus with the server, you can start subsequent file transmission.

The front-end must pass each part of the file to the backend. After successful transfer, the front-end and backend must be identified to facilitate subsequent breakpoints.

When the file transfer is interrupted, you can identify whether a part of the file has been uploaded by selecting the file again. If yes, we can continue to transfer the file at the previous progress, to achieve the Resume function.

File front-end Slicing

With the HTML5 File api, cutting files is much easier than you think.

You only need to use the slice method.

var packet = file.slice(start, end);

The start parameter indicates the start position of the slice, and the end parameter indicates the end position of the slice. The unit is bytes. By controlling start and end, you can implement file chunks.

For example:

file.slice(0,1000); file.slice(1000,2000); file.slice(2000,3000); // ......

File Fragment upload

In the previous section, we used the slice Method to divide the file into several blocks. The next thing we need to do is to upload these fragments to the server.

Here we use the ajax post request to implement

Var xhr = new XMLHttpRequest (); var url = xxx // The File Upload address can include the file parameters, such as the number of file names, so that xhr can be processed in the background. open ('post', url, true); xhr. onload = function (e) {// determine whether the file is successfully uploaded. If the file is successfully uploaded to the next part, retry this operation if the file fails} xhr. upload. onprogress = function (e) {// you can use this method to determine the upload progress of a single file if the file block size is large. // e. how many files have been uploaded by loaded? // e. totalSize 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.