An example of using Swupload to implement multi-image uploads in ASP.

This article is mainly for you to introduce the ASP. NET MVC uses Swupload to achieve multi-image upload function, with a certain reference value, interested in small partners can refer to

This example for everyone to share the swupload implementation of multi-image upload specific code for your reference, the specific content as follows

1. Download Webuploader

2. Copy the files from the downloaded package to your project

3. Adding references

<!--introduced jquery--><script src= "~/script/jquery-1.8.2.min.js" ></script><!--introduced Css--><link href= "~/css/webuploader.css" rel= "stylesheet"/><!--introduced Js--><script src= "~/script/webuploader.js" > </script>

4. Prepare a picture container and an upload button

<p id= "FileList" ></p> <!--This is the container that holds the picture--><p class= "Cp_img_jia" id= "Filepicker" ></p> < !--This is the upload button--

5. Create a Web uploader instance and listen for events

<script type= "Text/javascript" > var applicationpath = Window.applicationpath = = = ""? ": Window.applicationpath | | ".. /.. /";  $ (function () {var $ = jQuery, $list = $ (' #fileList '),//optimize retina, under Retina This value is 2 ratio = Window.devicepixelratio | |  1,//thumbnail size Thumbnailwidth = ratio, Thumbnailheight = ratio,//Web uploader instance uploader;   Uploader = Webuploader.create ({//is automatically uploaded after the file is selected).   Auto:false,//swf file path Swf:applicationpath + '/script/uploader.swf ',//File receive server. Server:applicationpath + '/home/uploadprocess ',//Select the File button.   Optional.   The internal is created according to the current run, either the INPUT element or flash. Pick: ' #filePicker ',//Only allow selection of pictures accept: {title: ' Images ', Extensions: ' Gif,jpg,jpeg,bmp,png ', mimetypes: ' Ima    ge/* '}}); When a file is added Uploader.on (' filequeued ', function (file) {var $li = $ (' <p id= "' + file.id + '" class= "cp_img" &   gt; ' + '  ' + ' <p class= ' Cp_img_jian ' ></p></p> '), $img = $li. Find (' img '); $lisT is the container jquery instance $list. Append ($li);   Create thumbnails//If you are not a picture file, you can not call this method. Thumbnailwidth x thumbnailheight is x uploader.makethumb (file, function (Error, SRC) {if (error) {$im     G.replacewith (' <span> cannot preview </span> ');    Return   } $img. attr (' src ', src);  }, Thumbnailwidth, thumbnailheight);  });  Create a progress bar in real-time display during file upload. Uploader.on (' uploadprogress ', function (file, percentage) {var $li = $ (' # ' + file.id), $percent = $li. Find ('. Progres   s span ');      Avoid repeatedly creating if (! $percent. length) {$percent = $ (' <p class= "Progress" ><span></span></p> ")   . AppendTo ($li). Find (' span ');  } $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). addclass (' Upload-state-done ');  });  File upload failed, display upload error.   Uploader.on (' Uploaderror ', function (file) {var $li = $ (' # ' + file.id), $error = $li. Find (' p.error '); Avoid repeatedly creating if(! $error. Length)   {$error = $ (' <p class= ' error ' ></p> '). AppendTo ($li);  $error. Text (' upload failed ');  });  Finished uploading, success or failure, first delete the progress bar.  Uploader.on (' uploadcomplete ', function (file) {$ (' # ' + file.id). Find ('. Progress '). Remove ();  });  All files uploaded uploader.on ("uploadfinished", function () {//Submit form});  Start uploading $ ("#ctlBtn"). Click (function () {uploader.upload ();  });  Displays the Delete button $ (". Cp_img"). Live ("MouseOver", function () {$ (this). Children (". Cp_img_jian"). CSS (' Display ', ' block ');  });  Hide the Delete button $ (". Cp_img"). Live ("Mouseout", function () {$ (this). Children (". Cp_img_jian"). CSS (' Display ', ' none ');  });   Execute the Delete method $list. On ("click", ". Cp_img_jian", function () {var Id = $ (this).). attr ("id");   Uploader.removefile (Uploader.getfile (id,true));  $ (this). Parent (). remove ();   }); });</script>

6 Create a new action in the controller to save the picture and return to the picture path (this is what the Eflay Seniors blog says)

Public ActionResult uploadprocess (string ID, string name, String type, string lastmodifieddate, int size, Httppostedfileba Se file)  {   string filepathname = string. Empty;   String localPath = Path.Combine (Httpruntime.appdomainapppath, "Upload");   if (Request.Files.Count = = 0)   {    return Json (New {JSONRPC = 2.0, error = new {code = 102, message = "Save Failed"}, ID = "id"});   String ex = path.getextension (file. FileName);   Filepathname = Guid.NewGuid (). ToString ("N") + ex;   if (! System.IO.Directory.Exists (LocalPath))   {    System.IO.Directory.CreateDirectory (localPath);   }   File. SaveAs (Path.Combine (LocalPath, filepathname));   Return Json (new   {    JSONRPC = "2.0",    id = id,    filePath = "/upload/" + Filepathname   });    }

That's it.