ASP. MVC5 Webuploader Multi-file Large file upload

1. Load First

<link rel= "stylesheet" type= "Text/css" href= "~/content/scripts/plugins/webuploader/webuploader.css" >
<script type= "Text/javascript" src= "~/content/scripts/plugins/webuploader/webuploader.js" ></script>

2. Put Div in the page

<div id= "uploader" class= "wu-example" >
<!--to store file information--
<div id= "thelist" class= "Uploader-list" ></div>
<div class= "Btns" >
<div id= "Picker" > select File </div>
<input id= "ctlbtn" type= "button" value= "Start uploading" class= "btn Btn-default"/>
</div>
</div>

3. Initialize Webuploader

<script>varApplicationpath = Window.applicationpath = = = ""? "": Window.applicationpath | | ".. /.. /"; varGUID = WebUploader.Base.guid ();//a GUID$(function () {        var$ =JQuery; var$list = $ (' #thelist '); varuploader =webuploader.create ({//whether the file is automatically uploaded after you finish selecting it. Autofalse,            //swf file pathSwf:applicationpath + '. /content/scripts/plugins/webuploader/uploader.swf ',            //The file receives the service side. Server:applicationpath + ' Businesmanage/knowledgebase/upload ',            //Select the button for the file. Optional.             //The internal is created according to the current run, either the INPUT element or flash.Pick: ' #picker ', chunked:true,//start a shard uploadchunksize:2048000,//the size of each pieceformData: {guid:guid//custom parameters, explained later            },            //do not compress the image, the default if it is JPEG, file upload will be compressed before uploading! Resizefalse        }); //When a file is added to the queueUploader.on (' filequeued ',function(file) {$list. Append (' <div id= ' + file.id + ' "class=" item "> ' + ' 
);        }); //Create a progress bar in real-time display during file upload. Uploader.on (' uploadprogress ',function(file, percentage) {var$li = $ (' # ' +file.id), $percent= $li. Find ('. Progress. Progress-bar '); //Avoid duplicate creation            if(!$percent. Length) {$percent= $ (' <div class= "Progress progress-striped Active" > ' + ' <div class= "Progress-bar" role= "Progress Bar "style=" width:0% "> ' + ' </div> ' + ' </div> '). AppendTo ($li). Find ('. Progre Ss-bar '); } $li. Find (' P.state '). Text (' in upload '); $percent. CSS (' Width ', percentage * 100 + '% ');        }); //file upload succeeded, add success class to item, upload success with style tag. Uploader.on (' uploadsuccess ',function(file, response) {$ (' # ' + file.id). Find (' p.state '). Text (' uploaded '); $.post (‘.. /.. /businesmanage/knowledgebase/merge ', {guid:guid, fileName:file.name},function(data) {$ ("#uploader. State"). HTML ("Upload successful ...");        });        }); //File upload failed, display upload error. Uploader.on (' Uploaderror ',function(file) {$ (' # ' + file.id). Find (' p.state '). Text (' Upload error '));        }); //finished uploading, success or failure, first delete the progress bar. Uploader.on (' uploadcomplete ',function(file) {$ (' # ' + file.id). Find ('. Progress ')). FadeOut ();        }); //All files uploadedUploader.on ("uploadfinished",function () {            //Submit Form        }); //Start uploading$ ("#ctlBtn"). Click (function() {uploader.upload (); });    }); </script>

4. Background processing

1  #regionFile Upload2 [HttpPost]3          Publicactionresult Upload ()4         {5             stringFileName = request["name"];6             stringFilerelname = filename.substring (0, Filename.lastindexof ('.')); //Set temporary storage folder name 7             intindex = Convert.ToInt32 (request["Chunk"]);//Current Chunk ordinal8             varGUID = request["GUID"];//the GUID number that came from the front end9             vardir = Server.MapPath ("~/upload");//File upload directoryTendir = Path.Combine (dir, filerelname);//temporarily save a chunked directory One             if(!System.IO.Directory.Exists (dir)) A System.IO.Directory.CreateDirectory (dir); -             stringFilePath = Path.Combine (dir, index. ToString ());//The chunked file name is the index name, more rigorous can be added to the existence of the judgment, prevent multi-threading concurrency conflict -             vardata = request.files["file"];//get a chunked file in the form the             //if (data! = NULL)//null may be the moment of pause -             //{ -Data. SaveAs (FilePath);//Error -             //} +             returnJson (New{Erron =0});//Demo, return a value, do not refer to -         } +          Publicactionresult Merge () A         { at             varGUID = request["GUID"];//GUID -             varUploaddir = Server.MapPath ("~/upload");//Upload Folder -             varFileName = request["FileName"];//file name -             stringFilerelname = filename.substring (0, Filename.lastindexof ('.')); -             vardir = Path.Combine (Uploaddir, filerelname);//Temp Folder -             varFiles = System.IO.Directory.GetFiles (dir);//get all of the following files in             varFinalpath = Path.Combine (Uploaddir, fileName);//The final file name (saved in the demo is the file name when it was uploaded, the actual operation must not be the case) -             varFS =NewFileStream (Finalpath, filemode.create); to             foreach(varPartinchFiles. (x = x.length). ThenBy (x = x))//row order, guaranteed from 0-n Write +             { -                 varbytes =System.IO.File.ReadAllBytes (part); theFs. Write (Bytes,0, Bytes. Length); *bytes =NULL; $System.IO.File.Delete (part);//Deleting TilesPanax Notoginseng             } - FS. Flush (); the FS. Close (); +System.IO.Directory.Delete (dir);//Delete a folder A             returnJson (New{error =0});//return any value you want, actually returning it as needed the         } +         #endregion

ASP. MVC5 Webuploader Multi-file Large file upload