[ASP] How to use JavaScript to split files into the backend merge

Recently studied how to use JavaScript to split the file and pass it through the backend. Specifically, remember the usage.

Write the limitations and some pitfalls of this article first

1. is the browser support because this article is useful to BLOBs and webworker.

In IE need at least 10 version above to support the following methods Oh!

2. Because this is a simple test, I'm going to put the file in the session and actually use it. It's supposed to split the file into the file system.

Don't say much, we'll start with the JS Terminal code.

Self.onmessage =function(e) {////web worker started    varblob = E.data.file;//Get file ContentConst SPLIT_BYTES = 100 * 1024;//The files are cut every 100KB.Const SIZE = blob.size;//size of File    varstart = 0;//the opening of the bit elements    varend = Split_bytes;//the end of the number of bit elements    varCount = SIZE% Split_bytes = = 0? Size/split_bytes:math.floor (size/split_bytes) + 1; //All of this is going to cut out a couple of files.    varIntidentifier = 1; varCompleted = 0; varXHR =NewSelf .    XMLHttpRequest (); Xhr.onload=function() {completed++;//complete the upload of the digital calculator        if(completed = = =count) {            //when the last file is successful, notify the backend to file the case .uploadcomplete (E.data.pid, blob.name); }    }    //This means that when a file can be cut, a cut is used to upload a file.    if(size>split_bytes) {         for(vari = 1; I <= count; i++) {            varChunk = Blob.slice (start, end);//# #這裡需要特別注意的是, we use slice to do a "segmented (cut)" of the file's bit numbers .            varurl = '/oberto/manager/home/fileupload/' + Intidentifier + '? name= ' + e.data.pid + "&filename=" + blob.name + "&AMP;CAC He= "+Date.now (); Xhr.open (' POST ', url,false); Xhr.setrequestheader (' Content-type ', ' Application/octet-stream ');            Xhr.send (chunk); //because we are "segmented (cut)", so our start and end are movingStart =end; End= Start +split_bytes; Intidentifier++; }    } Else {        //Here 's the general file .        varurl = '/oberto/manager/home/fileupload/' + Intidentifier + '? name= ' + e.data.pid + "&filename=" + blob.name + "&ca Che= "+Date.now (); Xhr.open (' POST ', url,false); Xhr.setrequestheader (' Content-type ', ' Application/octet-stream ');    Xhr.send (Blob.slice (Start, SIZE)); }   //This is when the split file is completed and the backend is notified    functionuploadcomplete (ID, name) {varURL1 = '/oberto/manager/home/uploadcomplete?id= ' + ID + "&filename=" + name + "&semesterid=" + E.data.semesterid + "&cache=" +Date.now (); varXHR1 =NewSelf .        XMLHttpRequest (); Xhr1.onload=function(e) {varresult =Json.parse (Xhr1.response);        Self.postmessage (result); } xhr1.open (' POST ', URL1,true); Xhr1.send (NULL); }}

The above is the content of my webwork program, and the more important part is that you need to use Blob.slice to do the file segmentation.

And because of my convenience, I will end up with the end-of-the-part-by-section motion as two. So there will be a corresponding code on the backend.

[HttpPost] [ValidateInput (false)]         Public stringFileUpload (intID) {//Here , according to the size of the sending file, set up a response byte array to receive            byte[] Chunk =New byte[Request.InputStream.Length]; //in this case, the file is stored in a byte array just created.Request.InputStream.Read (Chunk,0, Convert.ToInt32 (Request.InputStream.Length)); if(session["tempfiles"] ==NULL) {session["tempfiles"] =Chunk; //because I use the session as an example, I use the session to store it.            }            Else            {                //when a file has been received, this creates a merged byte.//and then use BlockCopy to do the combined motion.                byte[] Tempchunk = session["tempfiles"] as byte[]; byte[] Newchunk =New byte[Tempchunk.length +Chunk.                                Length]; Buffer.blockcopy (Tempchunk,0, Newchunk,0, tempchunk.length); Buffer.blockcopy (Chunk,0, Newchunk,tempchunk.length, Chunk.                Length); session["tempfiles"] =Newchunk; }            return "Incomplete"; }

The above is how the backend receives and after the split file. After the completion of the management, I see how you do

My final deal in the end, it's very simple to convert the contents of my session into a file and put it in my server catalogue.

This is a more complete process from the front-end to the back end of the entire partition file.

One thing to note here is that when we use XMLHttpRequest, the post or get will be e.g in a non-synchronous way. Xhr1.open (' POST ', URL1, true);

And because of the Web Wroker (that is, to build a new one, so even with synchronization will not lock our current page of the main threading)

This can be changed to synchronize, or in the non-synchronous situation, through the fiddler will catch Content-length Dismatch wrong

If you have any questions, welcome to the message to ask Yo

References:

Http://stackoverflow.com/questions/20212851/slice-large-file-into-chunks-and-upload-using-ajax-and-html5-filereader

[ASP] How to use JavaScript to split files into the backend merge