HTML5 some uses of the upload API (bottom)

Through the previous two share, we have taken care of the ordinary upload of a single file, including file preview, Image Preview, upload speed and other front-end interface display, this time we will talk about >xmlhttprequest2.0 after the interface if only with a multipart upload can do what function

About multipart uploads why use multipart uploads?

Consider the following scenario, If the user needs to upload a. avi video file to share in a video sharing community, the size is above 2G, this time if the user in the process of uploading, there has been a broadband drop, accidentally closed the browser and other such unexpected things, users this time in addition to re-transfer the entire file, there is no better choice, may users will not consider Times, the community may have lost a premium user. If the use of multipart upload can effectively avoid this problem. In addition, a large number of third-party cloud storage is actually acceptable file size limits.

What is a multipart upload?

The meaning of the multipart upload is actually to divide a large file, a video file is like a very large array file, Shard is to divide this array into n small array, we put the small file after the Shard to the server, the server in the fragmented file reorganization, To get a complete video file.

Advantages of multipart uploads

What are the advantages of using file multipart uploads?

• Stronger fault tolerance

  The use of multipart upload can greatly reduce the retransmission of the situation, a large file after the Shard upload even if the current shard in the process of uploading something unexpected, the user only need to re-upload the current Shard, instead of the entire file upload.

• Can simulate the pause and resume functions

  Using a multipart upload, when the user clicks on the pause, the current upload of a file, when the user clicks continue to continue from the current upload of the file to start uploading

• Can be resumed on a breakpoint

  After using the multipart upload, when the user shuts down the computer, the next time we can log on to the Web page by putting the ID of the Shard currently being uploaded and the MD5 of the file to get a unique key exists locally, the user opens the upload page and can directly read the current Shard location to continue uploading.

• About Second Pass

  Since we are able to serialize the fragmented file MD5, can we also consider serializing the entire file, comparing it to the file on the server, so that if there is already an identical file on the server, we can implement the second file directly.

How to upload a shard

Multipart upload so many benefits, then how to do the multipart upload it?

functionupload () {varfile=$ ("#file") [0].files[0],//File ObjectName=file.name,//file nameSize=file.size,//File SizeSucceed=0;//variables that can be used to calculate progress    varShardsize = 2 * 1024 * 1024,//with 2MB as a shardShardcount = Math.ceil (size/shardsize);//total number of pieces     for(vari = 0;i < shardcount;++i) {        //calculate the start and end positions of each slice        varstart = i *shardsize, End= math.min (size, start +shardsize); //constructs a form, Formdata is the HTML5 new            varform =NewFormData (); Form.append ("Data", File.slice (Start,end));//the slice method of the file object is used to cut out partForm.append ("Name", name); Form.append ("Total", shardcount);//total number of piecesForm.append ("Index", i + 1);//The current is the first few pieces            //Ajax Submissions$.ajax ({URL:".. /file/upload ", type:"POST", Data:form,//the form data object that was just builtAsync:true,//AsynchronousProcessData:false,//It's important to tell jquery not to handle the form.ContentType:false,//It is important to specify false to form the correct content-typeSuccess:function(){                    //now this piece of upload successfully show progress++succeed; $("#output"). Text (Succeed + "/" +shardcount);    }                        }); }}

The above code can be simple implementation of a multipart upload file front-end processing, of course, there are many things to do such as pause, if you still need to do a multipart upload of files, breakpoints, and so on, it is necessary to continue to write and write a lot of this low-level method. It is recommended to use an upload component called Plupload, which is very powerful and has the following features:

1. There are many ways to upload, HTML5, Flash, Silverlight and the traditional input type=file,plupload will automatically detect the current browser environment, switch to the most appropriate way to upload,
2. Support for drag and drop uploads
3. Image compression with front-end support
4. Support for reading of file information
5. Support for multipart uploads

Through plupload we do not need to care about these underlying processes in the upload process, only to instantiate the Plupload object to use the various events, methods, attributes, etc. that he provides to us.

The specific use of plupload can be referred to http://www.cnblogs.com/2050/p/3913184.html

HTML5 some uses of the upload API (bottom)