NODEJS+HTML5 compatible IE789 large file upload full version

Amateur big File Upload re-combed again, back-end based on Nodejs; there are several points to feel fun:

• Compatibility: IE789 as Representative;
• Cross-domain uploads: document.domain| | Middlepage;
• Multi-File Upload: input[' type=file '] multiple;
• Drag-and-drop upload: Drag drop;
• Large File Segmentation: Files.slice (s,e);
• Breakpoint continued to pass: Localstorage;
• Receive segmented files: formidable.onpart;
• Write the fragment file successively: Fs.write (FD,BF,OFFSET,LENGTH,POSITION,CB);

Obviously, the focus is not with the old IE, this is not intended to be supplemented with flash, directly with the most primitive approach: input[' type=file ']+hideframe; So, the task is HTML5, the pit is not many, because all the knowledge point Baidu can get But the facts tell me, the actual is a gap with the theory, especially some of the knowledge points to be entangled in the time, maybe Baidu just did to give people to fish, and to learn fishing, but also have to toss;

Then:

• Also said file Upload compatibility IE789 progress bar---lost flash
• Grilled Nodejs Formidable Onpart
• A breakpoint continuation of large file upload based on Nodejs

Step by step to the present ...

1, for the lower version of the IE789

Said to be compatible with IE78, immediately feel myself this small front end too bitter force, just for two Microsoft not browser, but also to get a bunch of messy hack,, and sometimes to compatible code, than the original code, there are many more, there are wood ... Well, forgive me, today's weather is really hot and dry, the special project still has to be special treatment, so for the low version of IE, only can upload, the basic look at that on the line;

2. Cross-domain upload

If the uploaded program is a stand-alone site or at a static resource station, it is necessary to handle cross-domain issues. The general practice is document.domain; there is another way of using middlepage, and I prefer the latter; if you want to cross-domain, you have to use the IFRAME to refer to that upload file, just take the entire path of middlepage on the SRC, and middlepage is located in the call station and is also a shadow of the IFRAME, the file upload after the datas as a parameter re-assignment to middlepage this iframe, and then call callback in the Middlepage, you can solve the cross-domain problem;

For example, on a 3000-port site called Port 5000 of the site upload, the iframe src:

1 http://localhost:5000/uploader?setdomainpath=http://localhost:5000/middlepage.html

Callback in Middlepage:

1 window.parent.parent.callback (Json.parse (Utils.url.query.datas));

Then call station callback can get datas;

3, multi-file upload

Multi-File upload only in input[' type=file ' plus multiple attributes (also new in the HTML5) can, well, in fact, we all know, focus on the drag and drop the entanglement;

4. Drag and drop upload

Well, drag-and-drop uploads are just like that, DragEnter, DragOver, DragLeave, and drop over; then above: The focus is on the entanglement with multiple file uploads; One is that multiple's multi-file upload is the Change event trigger of input. Another drag upload is triggered by the drop; multiple files I was an upload finished immediately after the next start; OK, the problem comes, I first use the change to upload a few files, and then drag a batch of file upload, and a single file can be canceled or deleted, after repeated drag and drop, is not immediately feel around together So the question is simple, not the problem itself, but the other problems involved and your ability to look at the problem and deal with the problem;

Because multiple file uploads need to create multiple display information, each of which is tied with two values, one is Data-index, the index value of each file to be uploaded, a status, the default is 0, and the upload succeeds to 1;files itself as an object of a class array. Its index can be corresponding to the Data-index, starting from the data-index=0 upload, after the completion of the search for the first status=0 item corresponding to the Data-index exists, there is upload this, does not exist that all uploaded But onchange and drop uploads repeatedly together, the problem comes, to maintain a files is not enough, that is, multiple cases of files to merge, plus said before the beginning of the upload from the status=0 corresponding to the Data-index decision, So merge files, that is, the files of this class array objects to be converted to arrays, and then multiple operations to merge them, so that only need to maintain the merged array, as for the possibility of deleting a piece, just delete its DOM, whether to delete the file, pending, At the same time to ensure the integrity of the merged array, because after the deletion may also drag a batch of uploads, to ensure that the Data-index and the combined array of the index one by one corresponding; so drag and multiple the entanglement of the dissolution;

1 varFilesarr=NULL;2 varstartfile=function(files) {3     varff=$ ('. prograssinfo[status=0] '). First ();4     varIns=ff.attr (' Data-index ');5     if(ins&&Window.dropedcouldstart) {6Ff.find ('. Delthis ')). Hide ();7         varfiles=NewUtils. Files ({8 Files:files[ins],9chunksize:10*1024*1024,Ten Fieldindex:ins, OneOnProgress:function(p) { Awindow.dropedcouldstart=false; - CALLBK (p,ins); -                 if(p>=100){ thewindow.dropedcouldstart=true; -$ ('. prograssinfo[data-index= ' +ins+ ') ') -. attr (' status ', 1). Find ('. Delthis ')). Show (); - Startfile (Filesarr); +                     //Make sure that the files object is the latest merged -                 } +             } A         }); at files.postfiles (); -     } - } -  - varDropcount=0; - varCreatefield=function(files) { in     if(files) { -         var_filesarr=[].slice.call (files,0); to         var_files=[];//Filter Type size +          for(vari=0;i<_filesarr.length;i++){ -             var_name=_filesarr[i].name; the             if(_filesarr[i].size>maxfilesize| | *$.inarray (_name.substr (_name.lastindexof ('. ') +1). toLowerCase (), accept)!=-1){ $ _files.push (_filesarr[i]);Panax Notoginseng             }; -         } the         if(filesarr&&filesarr.length) { +Filesarr=Filesarr.concat (_files); A}Else{ theFilesarr=_files; +         } -          for(vari = filesarr.length-_files.length; i < filesarr.length; i++) { $ $ (Contid) $ . Append (Fielditem (I,filesarr[i].name,utils.format.filesize (filesarr[i].size))); -             //Data-index corresponds to the value of I, ensuring that a single post is deleted and the index can correspond -         } the         if(window.dropedcouldstart==true&&filesArr&&filesarr.length) { -$ (' #uploadBtn '). Hide ();Wuyi Startfile (Filesarr); the         } -     } Wu}

5. Continuation of segmentation and breakpoint

Reference previous: Nodejs-based large file upload breakpoint continuation

6, segmented receive and write successively

Reference before: Grilled a grilled nodejs formidable onpart

7, the back end is Nodejs, will be so little, not caught dead; about file upload, online molding is also a lot, as my front-end road must be a large component, I would like to practice a, certainly feel different, because regardless of their own implementation or online code volume are many, this one of the details of processing and compatibility issues , as well as the application of HTML5, I have a very challenging significance, of course, the focus is the accumulation of basic, others write, take it is quite simple, but on the front end, for the technical point of application, you do not understand, the corresponding back-end processing, it is difficult to know what they did; This slowly certainly limits your expansion of the front-end technology point;

8, measured address: http://images.famanoder.com/uploader?show=1

Bitter force front-end to get the broken server, we do not go to the dead test Ah! This address will be closed at the end of the week.

It turns out that there is dead end, come on!

NODEJS+HTML5 compatible IE789 large file upload full version