Upload Plugin (webuploader)

Official website: http://fex.baidu.com/webuploader/
Plugin Download: https://github.com/fex-team/webuploader/releases/download/0.1.5/webuploader-0.1.5.zip
The following starts the use of Webuploader
The first kind, simple and rude.
Front-End Code:

<div id= "Picker" > select File </div><button id= "ctlbtn" class= "btn Btn-default" > Start uploading </button><!- -Reference Webuploader JS and Css--><link href= "~/scripts/webuploader-0.1.5/webuploader.css" rel= "stylesheet"/>< Script src= "~/scripts/webuploader-0.1.5/webuploader.js" ></script><script type= "Text/javascript" >    var uploader = webuploader.create ({        //(if the new browser can be used without flash)        //swf: '/scripts/webuploader-0.1.5/ Uploader.swf ',        //File receive server.        server: '/webuploader/savefile ',        //Select the File button. Optional.        //internal based on the current run is created, either the INPUT element or flash may be.        Pick: ' #picker '    });    $ ("#ctlBtn"). Click (function () {        uploader.upload ();    });    Uploader.on (' uploadsuccess ', function (file) {        alert ("Upload succeeded");    }); </script>

Background code:

public string SaveFile () {    if (Request.Files.Count > 0)    {        request.files[0]. SaveAs (Server.MapPath ("~/app_data/") + Path.getfilename (Request.files[0]. FileName));        Return "Save succeeded";    }    Return "not read to file";}

Second, multipart upload. Similar to the effect we wrote before.
Front-End Code:

var uploader = webuploader.create ({     //compatible with old version ie    swf: '/scripts/webuploader-0.1.5/uploader.swf ',     // The file receives the service side.    server: '/webuploader/svefile2 ',     //Open shard upload.    chunked:true,     //Shard size    chunksize:1000000,     //upload concurrency number    threads:1,    //Select File button.     pick: ' #picker '}); /click Trigger to Upload $ ("#ctlBtn"). Click (function () {    uploader.upload ();}); Uploader.on (' uploadsuccess ', function (file) {    alert ("Upload succeeded");});

Background code:

public string SveFile2 () {    //save file to root directory App_Data + get file name and format    var filePath = Server.MapPath ("~/app_data/") + Path.getfilename (Request.files[0]. FileName);    Create an append (filemode.append) mode for the file stream    using (FileStream fs = new FileStream (FilePath, Filemode.append, FileAccess.Write )    {        using (BinaryWriter bw = new BinaryWriter (FS))        {            //Read file stream            binaryreader br = new BinaryReader ( Request.files[0]. InputStream);            Leave the file in a byte array            byte[] bytes = br. Readbytes ((int) request.files[0]. Inputstream.length);            Appends a byte array to the file            bw. Write (bytes);        }    }    Return "Save succeeded";}

We see a parameter threads: 1 upload concurrency number, what if we change to more than 1? The front end initiates multiple file uploads simultaneously. The background will be error, multiple processes simultaneously manipulate a file.
What if we want multi-threaded uploads? Change the code (mainly background logic).
Front-End Code:

Concurrent uploads (multi-threaded upload) var uploader = webuploader.create ({    //compatible with old version ie    swf: '/scripts/webuploader-0.1.5/uploader.swf ',    //File receive service side.    server: '/webuploader/svefile3 ',    //Open shard upload.    chunked:true,    //Shard size    chunksize:1000000,    //upload concurrency number    threads:10,    //Select File button.    pick: ' #picker '}); /click Trigger to Upload $ ("#ctlBtn"). Click (function () {    uploader.upload ();}); Uploader.on (' uploadsuccess ', function (file) {    //] After uploading, send a command    $.ajax ({        URL: "/webuploader/") to the background to merge the files. Filemerge ",        data: {" FileName ": file.name},        type:" Post ",        success:function () {            alert (" Upload succeeded "); (c20/>});}    );

Background code:

public string SveFile3 () {var chunk = request.form["Chunk"];//is currently the number of pieces of var path = Server.MapPath ("~/app_data/") + Pa Th. Getfilenamewithoutextension (Request.Files if (!    Directory.Exists (path)//Determine if this path exists, or create {directory.createdirectory (path) if it does not exist;    }//save file to root directory App_Data + get file name and format var filePath = path + "/" + chunk;    Create an append (filemode.append) mode for the file stream using (FileStream fs = new FileStream (FilePath, Filemode.append, FileAccess.Write)) {using (BinaryWriter bw = new BinaryWriter (FS)) {//Read file stream binaryreader br = new Binar Yreader (Request.files[0].            InputStream); Leave the file in a byte array byte[] bytes = br. Readbytes ((int) request.files[0].            Inputstream.length); Appends a byte array to the file BW.        Write (bytes); }} return "saved successfully";} <summary>///merge File///</summary>///<param name= "path" ></param>///<returns></ returns>public bool Filemerge () {var fileName = ReqUest.    form["FileName"];    var path = Server.MapPath ("~/app_data/") + path.getfilenamewithoutextension (fileName); Here the sort must be correct, turn into a number after sorting (string will be sorted by 1 10 11, default 10:2 small) foreach (Var filePath in Directory.GetFiles (path). (t = int). Parse (Path.getfilenamewithoutextension (t)))) {using (FileStream fs = new FileStream (Server.MapPath ("~/app_data/ ") + FileName, Filemode.append, FileAccess.Write) {byte[] bytes = System.IO.File.ReadAllBytes (filePath );//Read file to byte array fs. Write (bytes, 0, bytes.    LENGTH);//write File} System.IO.File.Delete (FilePath);    } directory.delete (path); return true;}

You think it's over when you get here? Wrong, there are a lot of things not to be considered. What happens if multiple users upload a file name? How do I implement a breakpoint continuation? Not yet implemented select multiple files? However, here is not going to continue to paste the code (again, the amount of code more and more), you also come to practice it.
Provide a way to insert a data into the database before uploading. The data contains the path of the file to be saved, the file name (named with the GUID, prevent file conflicts with the same name), the files MD5 (to identify the next continuation and second pass), the temporary file Block storage path, the file is a complete upload of the success of information.
Then if we break the net and then pass, first get the file MD5 value, look at the database has not uploaded the complete file, if there is the realization of the second pass. If not, see if there is part of the upload. If there is a pass, re-upload a new file if it is not.

Upload Plugin (webuploader)