Asp.net MVC uses swupload to implement multiimage upload,

Asp.net MVC uses swupload to implement multiimage upload,

The examples in this article share with you the specific code of multiimage upload using swupload for your reference. The specific content is as follows:

1. Download WebUploader

2. copy the files in the downloaded package to your project.

3. Add reference

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

4. Prepare a container for storing images and an upload button.

<Div id = "fileList"> </div> <! -- This is the container for storing images --> <div class = "cp_img_jia" id = "filePicker"> </div> <! -- This is the upload button -->

5. Create a Web Uploader instance and listen to events

<Script type = "text/javascript"> var applicationPath = window. applicationPath = ""? "": Window. applicationPath | ".. /.. /"; $ (function () {var $ = jQuery, $ list = $ ('# filelist'), // optimize retina, in retina, the value is 2 ratio = window. devicePixelRatio | 1, // thumbnail size thumbnailWidth = 90 * ratio, thumbnailHeight = 90 * ratio, // Web Uploader instance uploader; uploader = WebUploader. whether to automatically upload the file after the create ({// Select File. Auto: false, // swf file path swf: applicationPath + '/Script/Uploader.swf', // file receiving server. Server: applicationPath + '/Home/uploadprocess', // select the file button. Optional. // The internal operation is based on the current operation, which may be an input element or flash. pick: '# filePicker', // only the image accept: {title: 'images', extensions: 'gif, jpg, jpeg, bmp, png ', mimeTypes: 'image/* '}); // uploader when a file is added. on ('filequeued', function (file) {var $ li = $ ('<div id = "' + file. id + '"class =" cp_img ">' + '' + '<div class =" cp_img_jian "> </div> '), $ img = $ li. find ('img '); // $ list is the container jQuery instance $ list. append ($ li); // create a thumbnail // You do not need to call this method if it is not an image file. // ThumbnailWidth x thumbnailHeight is 100x100 uploader. makeThumb (file, function (error, src) {if (error) {$ img. replaceWith ('<span> cannot be previewed </span>'); return;} $ img. attr ('src', src) ;}, thumbnailWidth, thumbnailHeight) ;}; // The progress bar created during file upload is displayed in real time. Uploader. on ('uploadprogress', function (file, percentage) {var $ li = $ ('#' + file. id), $ percent = $ li. find ('. SS span '); // avoid repeated if (! $ Percent. length) {$ percent = $ ('<p class = "progress"> <span> </p> '). appendTo ($ li ). find ('span ');} specify percent.css ('width', percentage * 100 +' % ');}); // The file is uploaded successfully and the class is added to the item, the upload is successfully marked with a style. Uploader. on ('uploadsuccess', function (file, response) {$ ('#' + file. id ). addClass ('upload-state-done') ;}); // An error occurred while uploading the file. Uploader. on ('uploaderror', function (file) {var $ li = $ ('#' + file. id), $ error = $ li. find ('div. error '); // avoid repeated if (! $ Error. length) {$ error = $ ('<div class = "error"> </div> '). appendTo ($ li);} $ error. text ('upload failed') ;}); // After the upload is complete, the progress bar is deleted. Uploader. on ('uploadcomplete', function (file) {$ ('#' + file. id ). find ('. SS ss '). remove () ;}); // all files have been uploaded uploader. on ("uploadFinished", function () {// submit form}); // starts to upload $ ("# ctlBtn "). click (function () {uploader. upload () ;}); // display 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 ). parent (). attr ("id"); uploader. removeFile (uploader. getFile (Id, true); $ (this ). parent (). remove () ;}); </script>

6. Create an Action in the Controller to save the image and return the image path (as described in the eflay blog)

Public ActionResult UpLoadProcess (string id, string name, string type, string lastModifiedDate, int size, HttpPostedFileBase 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 = "failed to save"}, id = "id "});} string ex = Path. getExtension (fi Le. 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 });}

In this way, we are done.

This is the first time I wrote a blog. If any of the content is not detailed or incorrect, please give us some advice. Hope to make progress together with everyone.

Source code download: swupload for multi-Image Upload

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.