Shulou(Shulou.com)05/31 Report--

Most people don't understand the knowledge points of this article "How to realize file breakpoint continuation function in HTML5", so Xiaobian summarizes the following contents for everyone. The contents are detailed, the steps are clear, and they have certain reference value. I hope everyone can gain something after reading this article. Let's take a look at this article "How to realize file breakpoint continuation function in HTML5".

HTML5's FILE api has a slice method that splits 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 transmits the segments one by one to the back end, and the back end then assembles the file one by one according to the sequence.

Principle of breakpoint continuation

At present, there are two commonly used methods for breakpoint continuation. One is to upload files through websocket interface, and the other is to upload files through Ajax. Although websocket sounds more advanced, other algorithms are basically very similar except for using different protocols, and the server needs to open ws interface. Here, the relatively convenient Ajax is used to illustrate the idea of breakpoint upload.

After all, the core content of breakpoint continuation is to "slice" the file and then send it to the server one by one, but this seemingly simple upload process has countless pits.

The first is the identification of the file, how to tell the server how many pieces you have cut after a file has been divided into several pieces, and how the server should merge the files you uploaded.

Therefore, before the file starts uploading, we have to 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. After reaching a consensus with the server, we can start the subsequent file transfer.

The foreground should pass each piece of file to the background. After success, both the front end and the back end should be identified for subsequent breakpoints.

When the file transmission is interrupted, the user can select the file again to judge whether a part of the file has been uploaded by the identifier. If so, we can continue to transmit the file according to the previous progress to achieve the function of resuming transmission.

Front slice of file

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

Just use the slice method.

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

The start parameter is where the slice starts, and the end parameter is where the slice ends, both in bytes. By controlling start and end, you can achieve file chunking

For example:

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

Upload of file fragments

In the previous section we divided the file into several pieces using the slice method. The next thing to do is to transfer these pieces to the server.

Here we use ajax post request to achieve

var xhr = new XMLHttpRequest(); var url = xxx //The file upload address can include file parameters such as file name and number of blocks for background processing xhr.open ('POST ', url, true); xhr.onload = function (e){ //Determine whether the file is uploaded successfully. If it succeeds, continue to upload the next block. If it fails, retry the file.} xhr.upload.onprogress = function(e){ //Select If the file block size is large, you can use this method to determine the specific upload progress of a single file // e.loaded How many files are uploaded // e.totalSize} xhr.send(packet);

After the file is uploaded to the background, background programs such as PHP will make corresponding processing.

The above is the content of this article about "HTML5 how to achieve file breakpoint resume function". I believe everyone has a certain understanding. I hope the content shared by Xiaobian will be helpful to everyone. If you want to know more relevant knowledge content, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.