JQuery webuploader Fragment upload large file _jquery

Usually when you do file upload, are uploaded through the client to upload the file to the server, at this time uploaded files are in the server memory, if the upload is video and other large files, then the server memory is very tense, and generally we are using Flash or HTML5 do asynchronous upload, if the file is relatively large, Even if the client display file has been uploaded 100%, there will still be a longer wait, and the current page to the server's request will be blocked.

Normally, after the long pass is completed, the server is saved directly.

public void ProcessRequest (HttpContext context)
  {context
   . Response.ContentType = "Text/plain";
   Save the file context
   . Request.files[0]. SaveAs (context. Server.MapPath ("~/1/" + context.) Request.files[0]. FileName));
   Context. Response.Write ("Hello World");
  }

Recently in the project with Baidu Open source upload component Webuploader, official introduction Webuploader support fragment upload. The use of specific webuploader see official website http://fex.baidu.com/webuploader/.

var uploader = webuploader.create ({
   auto:true,
   swf: '/webuploader/uploader.swf ',
   //File receive server.
   server: '/uploader.ashx ',
   //internal according to the current run is created, may be INPUT element, it may be flash.
   Pick: ' #filePicker ',
   chunked:true,//open fragmentation upload
   threads:1,//upload concurrency number
   //due to the stateless characteristics of HTTP, Sending a data to the server passes an entry to the current page which is the generated GUID as marked
   formData: {guid: <%=guid.newguid (). ToString ()%> "}
  });

Webuploader's fragment upload is to divide the file into several parts, and then to the file you define to receive the end of the post data, if the uploaded file is larger than the size of the fragment, it will be fragmented, and then in the post of the data added two form elements chunk and chunks, The former indicates the order of the current fragment in the upload fragment (starting from 0), and the latter represents the total number of slices.

After selecting a file, 7 slices were divided, so the process of 7 post data was performed on the uploader.ashx.

The form element chunk and chunks in each request, and the GUID to mark the fragment of the same file

　

Once the data is received on the server side, it can be processed according to these parameters.

1. Create a temporary file by GUID

2. Append the received fragment data to the corresponding GUID file.

3. Rename the temporary file according to the uploaded file name

4. If no fragment is saved directly

public void ProcessRequest (HttpContext context) {context.
   Response.ContentType = "Text/plain"; If the fragment if (context) is performed. Request.Form.AllKeys.Any (m => m = = "Chunk")) {//get chunk and chunks int chunk =convert.toint32 (context.
    request.form["Chunk"]); int chunks = Convert.ToInt32 (context.

    
    request.form["chunks"]); Creates a temporary file named with this GUID, based on a GUID, string path = context. Server.MapPath ("~/1/" + context.)
    Request["GUID"]);
    FileStream addfile = new FileStream (path, filemode.append, FileAccess.Write);
    BinaryWriter addwriter = new BinaryWriter (addfile); Get the uploaded fragment data stream Httppostedfile File = context.
    Request.files[0]; Stream stream = file.

    InputStream;
    BinaryReader tempreader = new BinaryReader (stream); Appends the uploaded fragment to the end of the temporary file Addwriter.write (tempreader.readbytes (int) stream.
    Length));
    Close BinaryReader File Reader tempreader.close (); Stream.
    Close ();
    Addwriter.close ();

    Addfile.close ();
    Tempreader.dispose (); Stream.
    Dispose (); AddwRiter.
    Dispose ();
    Addfile.dispose ();
     If this is the last fragment, rename the temporary file to the uploaded file name if (chunk = = (chunks-1)) {FileInfo FileInfo = new FileInfo (path); FileInfo. MoveTo (context. Server.MapPath ("~/1/" + context.) Request.files[0].
    FileName)); } else//does not have a fragment to save the {context directly. Request.files[0]. SaveAs (context. Server.MapPath ("~/1/" + context.) Request.files[0].
   FileName)); } context.
  Response.Write ("OK");
 }

There are still some unresolved issues, though temporarily satisfying demand:

1, if the upload concurrency more than 1, there will be a fragmented upload server has not finished processing, the second fragment at the same time, it will appear files are occupied errors.
2, if the method of locking to solve the first problem, the lock will certainly affect efficiency (at the same time only one process can access the code to save the file).
3, the file order problem, there may be a second fragment first to, and then the first to, then you can not append to the temporary file, can only create a number of temporary files, to all fragments uploaded after the completion of the mosaic into a file.

Just a demo, I hope someone to help solve the problem.

For more highlights, please click on the "jquery Upload operation Summary" for in-depth study and research.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.