Html5 large file breakpoint resume implementation method_html5 tutorial skills

Large file chunking

Generally commonly used web servers have size limits for submitting data to the server. For files exceeding a certain size, the server will return a rejection message. Of course, web servers provide configuration files that may modify the size limit. There are also some ways to upload large files to IIS by modifying the web server to limit the file size. However, this poses problems for the security of the web server. An attacker can easily send a large data packet and directly drag your web server to death.
The current mainstream implementation method for uploading large files is by dividing large files into chunks. For example, for a 100M file, split it into 50 blocks according to 2M. Then upload each file to the server in turn, and then merge the files on the server after the upload is completed.
To implement large file upload on the web, the core mainly implements file segmentation. Before the Html5 File API appeared, it was necessary to implement file transfer in chunks on the web. File chunking can only be achieved through flash or Activex.

Under Html5, we can directly implement file segmentation through the slice method of file. Such as:

XML/HTML CodeCopy content to clipboard

1. file.slice(0,1000);
2. file.slice(1000,2000);
3. file.slice(2000,3000);

Then it is uploaded to the server asynchronously through XMLHttpRequest.

Html5 upload file class library

If you are interested and have time, of course you can use the File API of html5 to implement it yourself. I found the following two libraries that support HTML5 on the Internet.
resumable.js Attached is the address on git: https://github.com/23/resumable.js
Pludload http://plupload.com/

resumable is a pure HTML5 upload class Library.
Pludload supports html5, flash, silverlight, and html4. It will automatically determine whether the browser supports html5 and will use other upload methods.
I tested it and found that both resumable and Pludload support html5 uploading files in chunks. After using it, I feel that resumable is more suitable, so I will choose resumable for introduction below.

Introduction to using resumable.js breakpoint upload

Main configuration introduction:

JavaScript CodeCopy content to clipboard

1. var r = new Resumable({
2. target:'/test/upload',
3. chunkSize:1*1024*1024,
4. SimultaneousUploads:4,
5. testChunks: true,
6. ThrottleProgressCallbacks:1,
7. method: "octet"
8. });

chunkSize Chunked file size, in bytes
simultaneousUploads The number of processes uploading file chunks at the same time, allowing multiple file chunks to be uploaded at the same time.
testChunks checks whether the previous file chunk should first send file information through get method to detect whether the file has been uploaded.

Resumable breakpoint upload is implemented through the testChunks configuration node, when set to true. resumable will first send a get request, if the http status returns 200. It is considered that the current block has been uploaded, and then a get request for the next block is made. If the http status returned is not 200, the current block data packet will be sent through post mode for file block upload.

Setting testChunks to true will add a get request for each upload, if we already know the number of chunks in the file before the last interrupted upload. Next time, just upload directly from the interrupted block number. This reduces one http get request for each block.
In response to this requirement, I modified the source code of resumable and added a startchunkindex attribute to the file object in resumable, which defaults to 0. Used to set the block from which the current file should be uploaded. In this way, we only need to perform a query from the server before uploading the file (querying which block the current file is uploaded to) and return the last uploaded file block index. Then set the index value to the startchunkindex attribute of file to start uploading from the last disconnected file block.
Calling method:

JavaScript CodeCopy content to clipboard

1. //Handle file add event
2. r.on('fileAdded', function (file) {
3.                                                                                                                                                                                                                                                 . For details, you can view the demo in the attachment.
Finishing work

After all file blocks have been uploaded, the final work is to merge and save the files. The attachment is a server example of resumable upload.net implementation, including a simple file merging function. You can also download demos in other languages ​​from resumable's git.
For the sake of simplicity, the demo example only stores the files on the local machine. In a real production environment. Generally, it should be placed on a separate file server (the front-end web is uploaded to the file server through ftp or folder sharing), and then the uploaded files should be distributed, mirrored or processed (such as video compression). Of course, it is best to store it in a distributed file system. Currently, it seems that putting it in the Hadoop Distributed File System (HDFS) is a good solution.
demo


Vs2012 Html5 Upload demo download