What is the principle of resume transfer? How to use html5 to achieve 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 websocketinterface ##, the other is through ajax, both methods have their own merits. Although websocket sounds more high-end, except for using different protocols, other algorithms are basically very similar, and the server must open the ws interface. Here we use relatively convenient ajax 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, both the front end and the 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 all bytes. By controlling start and end, you can implement file segmentation.

For example:

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

Uploading file fragments

In the previous part, we divided the file into several pieces through the slice method. chunks, 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 detailed content of What is the principle of resume transfer? How to use html5 to achieve breakpoint resume upload of files. For more information, please follow other related articles on the PHP Chinese website!