Detailed introduction to HTML5 File api to implement breakpoint resumption

Currently, most websites on the market require the installation of browser plug-ins for breakpoint upload. This article is aimed at advanced browser environments, through HTML5 File apiImplement breakpoint upload for explanation

1. Implement multiple file selection

HTML5's has added the "multiple" attribute, which can accept multiple values. The File upload field

<input type="file" multiple="multiple" name="file" id="file">

If this attribute is added, the user can select multiple files at once in the pop-up dialog box

2. Drag files from the computer Drag to web page and add file queue function

Here we use dragover and drop events to manage the file dragging function

The dragover is used to handle the event when moving on the specified element , here we bind the dragover time to the body to handle the event of dragging files on the page

document.body.addEventListener('dragover', dragFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

Use the drop event to handle the event when the mouse is released. At this time, the file dragged by the user should be added to In the upload queue for subsequent processing

document.body.addEventListener('drop', dropFile, false);
function dragFile(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 // dataTransfer.files属性可以获取到所有拖动选择的文件，通过遍历可以读取到所有文件的信息。
 // 遍历每个文件可以获取到文件的 name、size、type、lastModifiedDate等关键信息
 var files = evt.dataTransfer.files;
 // addfile 方法 用来添加上传文件队列，在input的change事件中也需要调用
 // 该方法首先检查有无文件正在上传中，如果有就将后续加入的文件放到上传队列中，如果没有文件正在上传就直接执行上传命令
 addfile(files);
}

3. Principle of file resumption

There are currently two commonly used methods for resuming file transfers. One is to perform file resumption through the websocket interface. Upload, the other is through ajax, both methods have their own merits, although websocket sounds more high-end~ But except for using different protocols, other algorithms are basically very similar, and the server must open the ws interface, here 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, 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. .

4. 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 bytes. By controlling start and end, you can achieve file segmentation

such as

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

5. Uploading file fragments

In the previous part, we divided the file into slices using the slice method Several pieces, the next thing to do is to transfer these fragments to the server.

Here we use ajax’s

post request to achieve

textpop-up

rrree

• 
  

The above is the detailed content of Detailed introduction to HTML5 File api to implement breakpoint resumption. For more information, please follow other related articles on the PHP Chinese website!