HTML5 Large File Breakpoint continuation

Large file chunking

Generally used Web servers have a limit on the size of data submitted to the server side. The server side of a file that exceeds a certain size returns a deny message. Of course, the Web server provides the size of the configuration file that might modify the limit. The upload of large files for IIS is also implemented by modifying the Web server to limit file size. But this is a problem with the seatbelt on the Web server. It is easy for an attacker to send a large packet and drag your Web server directly to death.

Now for large file upload mainstream implementation way, by the large file chunking. For example, for a 100M file, press 2M to split into 50 pieces. Then upload each piece of file to the server in turn, and then merge the files on the server after uploading is complete.

In the Web implementation of large file upload, the core of the main implementation of the file block. Before the Html5 file API appears, you want to implement file chunked transfer on the web. Only blocks of files are implemented via flash or ActiveX.

Under HTML5, we can implement the file chunking directly through the slice method. Such as:

File.slice (0,1000); File.slice (1000,2000); File.slice (2000,3000);

It is then uploaded asynchronously to the server via XMLHttpRequest.

HTML5 uploading a File class library

If you have the interest and time, of course, you can use the HTML5 file API to implement. I found the following two support HTML5 class library online.
Resumable.js with git address: https://github.com/23/resumable.js
Pludload http://plupload.com/

Resumable is a pure HTML5 upload class library.
And Pludload is a support HTML5,FLASH,SILVERLIGHT,HTML4, it will automatically determine whether the browser support HTML5 does not support the use of other upload methods.
I tested it, resumable and Pludload both supported HTML5 to upload files. Use down to feel resumable more suitable, the following is selected resumable to introduce.

Resumable.js Breakpoint Upload Usage Introduction

Main Configuration Description:

        var r = new Resumable ({            target: '/test/upload ',            chunksize:1*1024*1024,            simultaneousuploads:4,            Testchunks:true,            throttleprogresscallbacks:1,            method: "Octet"          });

ChunkSize chunked file size, in bytes
Simultaneousuploads simultaneously uploads the number of File block processes, allowing multiple file blocks to be uploaded simultaneously.
Testchunks The first file block is sent by the Get method to send the file information to detect whether the file has been uploaded.

Resumable breakpoint uploads are implemented by the Testchunks configuration node when set to True. Resumable will send a GET request first if the HTTP status returns 200. It is assumed that the current block has been uploaded and then the next piece of Get request is made. If the HTTP status returned is not 200, the current block packet is sent via post for File block uploads.

Set Testchunks to True each upload will add a GET request if we already know the block number of the file before the last interrupt upload. Upload the next number of blocks directly from the interrupt. This allows you to reduce the GET request for HTTP one time for each block.
In response to this demand, I modified the resumable source, for the Resumable file object added a Startchunkindex property, the default is 0. Used to set the current file from which block to start uploading. In this way, we only need to make a query from the server before uploading the file (query which piece is uploaded to the current file) and return the last uploaded file block index. Setting the index value to the file's Startchunkindex property allows you to start uploading from the last broken block.
Call Mode:

              Handle file Add event              r.on (' fileadded ', function (file) {                  file.startchunkindex = 0;//Set the number of blocks to start uploading

You can see the demo in the attachment.

Finishing work

All file blocks are uploaded and the last job is to merge and save the files. The attachment is a server-side example of resumable-off upload. NET implementation, including simple file merging functions. Other language demos can also be downloaded from resumable git.
Demo example for simple, just put the file in the local. In a real production environment. It should generally be placed on a separate file server (the foreground web is uploaded to the file server via FTP or folder sharing), and then the uploaded files are distributed for mirroring or processing (such as video compression). Of course it is best to have a distributed file system, and it is a good idea to now look down into the Hadoop Distributed File System (HDFS).

Demo

Vs2012 Html5 Upload Demo Download

HTML5 Large File Breakpoint continuation