HTML5 implementation of file breakpoint renewal methods

HTML5's File API has a Slice method that can be divided into BLOB objects. The front end obtains the corresponding file through the FileList object. The large file segments are segmented in the specified segmentation method, and then passed to the back end, and the file is stitched in order.

At present, there are two commonly used breakpoints. One is to upload files through the WebSocket interface, and the other is through AJAX. The two methods have their own thousands Other algorithms outside the agreement are basically similar, and the server should open the WS interface. Here is a relatively convenient AJAX to show the idea of ​​uploading the breakpoint.

In other words, the core content of the breakpoint is to slice the file and then pass it to the server again, but the seemingly simple upload process has countless pits.

The first is the identification of the file. After a file is divided into a number of portions, how to tell the server how many pieces have you cut, and how to merge the files you uploaded to the final server. This is all considered.

Therefore, before the file starts upload, we have a handshake process with the server, tell the server file information, and then agreed with the size of the section with the server. After reaching a consensus with the server, we can start the subsequent file transmission.

The front desk must pass the files to the background. After successful, the front and back -end must be identified for subsequent breakpoints.

After the file transmission is interrupted, the user selects the file again to determine whether the file has been uploaded through the identification. If so, then we can continue to pass the file in the last progress to achieve the renewal function.

With the File API of HTML5, cutting files are much simpler than imagined.

Just use the slice method

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

The parameter start is the position of the start of the slice. By controlling start and end, it can be a separate block of the file

As:::

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

In the previous one, we divided the files into several pieces through the Slice method. What we need to do next is to pass these fragments to the server.

Here we use Ajax's post request to implement

 var xhr = new xmlhttpRequest (); var url = xxx // The address uploaded by the file can include the parameters of the file, such as the number of file names, etc. Xhr.open ('Post', URL, TRUE); xhr.Onload = Function (e) {// Judging whether the file is uploaded successfully. If successfully continues to upload the next piece, if it fails to retry it} xhr.upload.onprogress = Function (e) {// This method determines the specific upload progress of a single film file // e.loaded how much the file is uploaded.

After the file is uploaded to the background, the background program will be processed accordingly.