HTML5 method to implement breakpoint resume upload of files

HTML5's FILE api has a slice method that can split BLOB objects. The front end obtains the corresponding file through the FileList object, divides the large file into segments according to the specified division method, and then passes it to the back end piece by piece, and the back end splices the files piece by piece in order.

Principle of resumable transfer

There are currently two commonly used methods of resuming transfer, one is to upload files through the websocket interface, and the other is It is through ajax. Both methods have their own advantages. Although websocket sounds more high-end, except for using different protocols, other algorithms are basically very similar, and the server needs to open the ws interface. The relatively convenient ajax is used here. To illustrate the idea of ​​breakpoint upload.

After all, the core content of resume uploading is to "slice" the file and then pass it to the server piece by piece. However, this seemingly simple upload process has countless pitfalls.

The first is file identification. After a file is divided into several parts, how to tell the server how many pieces you have cut, and how the server should finally merge the files you uploaded, all need to be considered.

So before the file starts to be uploaded, we need to have a "handshake" process with the server, tell the server the file information, and then agree on the size of the slice with the server. After reaching a consensus with the server, we can start subsequent files. Transmitted.

The front end must pass each piece of file to the back end. After success, the front end and back end must be marked for subsequent breakpoints.

When the file transfer is interrupted, the user can select the file again and use the logo to determine whether part of the file has been uploaded. If so, then we can continue to upload the file according to the last progress to achieve the function of resuming the upload. .

Front-end slicing of files

With the HTML5 File api, cutting files is much simpler than imagined.

Just use the slice method

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

The parameter start is the position where the slice starts, and end is the position where the slice ends. The units are words. Festival. By controlling start and end, you can achieve file segmentation

For example:

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

Upload of file fragments

In the previous part, we divided the file into several chunks through the slice method. The next thing to do is to transfer these fragments to the server.

Here we use ajax post request to achieve

var xhr = new XMLHttpRequest(); 
var url = xxx // 文件上传的地址 可以包括文件的参数 如文件名称 分块数等以便后台处理 
xhr.open('POST', url, true); 
xhr.onload = function (e){ 
     // 判断文件是否上传成功，如果成功继续上传下一块，如果失败重试该快 
} 
xhr.upload.onprogress = function(e){ 
     // 选用 如果文件分块大小较大 可以通过该方法判断单片文件具体的上传进度 
     // e.loaded  该片文件上传了多少 
     // e.totalSize 该片文件的总共大小 
} 
xhr.send(packet);

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

The above is the content of the HTML5 method to implement file breakpoint resumption. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!