The use of JQuery uploadify in ASP. NET MVC3

1, Uploadify Introduction

Uploadify is a jquery-based upload plugin that supports multiple files, with progress bar display uploads, and is often used in project development.

Uploadify Official website: http://www.uploadify.com/

2. Using uploadify in ASP. MVC3

Build an ASP. MVC3 solution, where the uploadify used is version 3.1:

　　1>, simple example

_layout.cshtml Code:

<! DOCTYPE html>
Index.cshtml Code:
@{viewbag.title = "Index"; Layout = "~/views/shared/_layout.cshtml";} @section header{<link href= "@Url. Content (" ~/scripts/uploadify-v3.1/uploadify.css ")" rel= "stylesheet" type= "text /css "/> <script src=" @Url. Content ("~/scripts/jquery-1.8.1.min.js") "Type=" Text/javascript "></script > <script src= "@Url. Content (" ~/scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js ")" Type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (Function () {$ (' #file_upload '). uploadify ({' SWF ': ' @Url. Content ("~/scripts/uploadify-v3.1/uploadify.swf") ', ' uploader ': '        /home/upload '});    });        </script> <style type= "Text/css" > body {font-size:12px;            }. Tip {height:20px;            border-bottom:1px solid #CCC;        margin-bottom:10px; } </style>}<div class= "Tip" > Jquey UPloadify Upload File Example: </div><input type= "file" id= "File_upload" name= "File_upload"/> 
HomeController.cs Code:
Using system;using system.collections.generic;using system.linq;using system.web;using System.Web.Mvc;using        System.io;namespace webui.controllers{public class Homecontroller:controller {////GET:/home/        Public ActionResult Index () {return View ();  } [Acceptverbs (Httpverbs.post)] public jsonresult Upload (HttpPostedFileBase fileData) {if            (FileData! = null) {Save path after try {//File upload string FilePath = Server.MapPath                    ("~/uploads/"); if (!                    Directory.Exists (FilePath)) {directory.createdirectory (FilePath); The string fileName = Path.getfilename (filedata.filename);//The original file name string file Extension = Path.getextension (fileName); File extension String savename = Guid.NewGuid (). ToString () + fileextension; Save FileName Filedata.saveas (FilePath + savename);                Return Json (New {Success = true, filename = filename, savename = savename}); } catch (Exception ex) {return Json (new {Success = false, Message = ex).                Message}, Jsonrequestbehavior.allowget); }} else {return Json (new {Success = false, Message = "Please select a file to upload!")            "}, Jsonrequestbehavior.allowget); }        }    }}
Upload:
2>, set the upload image size
NET MVC by default, the maximum file size allowed to upload is 4MB. Therefore, by default, uploadify can only upload files with a maximum size of 4MB, and an IO error message will not be uploaded if the range is exceeded.
Modify the Web. config setting to allow the maximum file size to upload:
<system.web> <!--set maximum allowable upload file size 1g--> 
Modify the maximum upload file size after the effect:
3>, uploadify common property settings
Auto: If the file is automatically uploaded after it is selected, the default is true.
@{viewbag.title = "Index"; Layout = "~/views/shared/_layout.cshtml";} @section header{<link href= "@Url. Content (" ~/scripts/uploadify-v3.1/uploadify.css ")" rel= "stylesheet" type= "text /css "/> <script src=" @Url. Content ("~/scripts/jquery-1.8.1.min.js") "Type=" Text/javascript "></script > <script src= "@Url. Content (" ~/scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js ")" Type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (Function () {$ (' #file_upload '). uploadify ({' Auto ': false, ' swf ': ' @Url. Content ("~/SCRIPTS/UPLOADIFY-V3.1/UPLOADIFY.SW        F ") ', ' uploader ': '/home/upload '});    });        </script> <style type= "Text/css" > body {font-size:12px;            }. Tip {height:20px;            border-bottom:1px solid #CCC;        margin-bottom:10px; } &LT;/STYLE&Gt;} <div class= "Tip" > Jquey uploadify Upload file example:</div><div> <input type= "file" id= "File_upload" Name= "f Ile_upload "/></div><div> <a href=" javascript:$ (' #file_upload '). Uploadify (' upload '); " > Upload </a></div>
ButtonText: Sets the upload button to display text.
<script type= "Text/javascript" >    $ (function () {        $ (' #file_upload '). Uploadify ({            ' ButtonText '       ) : ' Please select Upload file ',            ' swf '        : ' @Url. Content ("~/scripts/uploadify-v3.1/uploadify.swf") ', '            uploader '   : '/ Home/upload '        })    ; </script>
buttonimage: Set the upload button background image.
@{viewbag.title = "Index"; Layout = "~/views/shared/_layout.cshtml";} @section header{<link href= "@Url. Content (" ~/scripts/uploadify-v3.1/uploadify.css ")" rel= "stylesheet" type= "text /css "/> <script src=" @Url. Content ("~/scripts/jquery-1.8.1.min.js") "Type=" Text/javascript "></script > <script src= "@Url. Content (" ~/scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js ")" Type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (Function () {$ (' #file_upload '). uploadify ({' Buttonimage ': ' @Url. Content ("~/scripts/uploadify-v3.1/browse-btn.png") ', ' swf ': ' @Url. Co        Ntent ("~/scripts/uploadify-v3.1/uploadify.swf") ', ' uploader ': '/home/upload '});    });        </script> <style type= "Text/css" > body {font-size:12px;            }. Tip {height:20px;            border-bottom:1px solid #CCC; Margin-bottom:10px;            }. Uploadify-button {background-color:transparent;            Border:none;        padding:0;        }. Uploadify:hover. uploadify-button {background-color:transparent; } </style>}<div class= "Tip" > Jquey uploadify Upload file example:</div><div> <input type= "file" id= " File_upload "Name=" File_upload "/></div>
Multi: If you want to allow multiple files to be uploaded together at one time, the default is true.
<script type= "Text/javascript" >    $ (function () {        $ (' #file_upload '). Uploadify ({            ' buttonimage ': ' @ Url.content ("~/scripts/uploadify-v3.1/browse-btn.png") ',            multi:true,            ' swf ': ' @Url. Content ("~/scripts/ uploadify-v3.1/uploadify.swf ") ',            ' uploader ': '/home/upload '        });    </script>
filetypedesc: Set allow upload image format description;
filetypeexts: Set allow image format to be uploaded.
<script type= "Text/javascript" >    $ (function () {        $ (' #file_upload '). Uploadify ({            ' buttonimage ': ' @ Url.content ("~/scripts/uploadify-v3.1/browse-btn.png") ',            ' filetypedesc ': ' Picture file ',            ' filetypeexts ': ' *.gif; *.jpg; *.png ',             ' swf ': ' @Url. Content ("~/scripts/uploadify-v3.1/uploadify.swf") ',            ' uploader ': '/home/upload '        });    }); </script>
removecompleted: Sets whether the uploaded file has been removed from the queue and is true by default.
$ (function () {    $ ("#file_upload"). Uploadify ({        ' removecompleted ': false,        ' swf '             : '/uploadify/ Uploadify.swf ',        ' uploader '        : '/uploadify/uploadify.php '    });
queuesizelimit: Sets the number of uploaded files allowed in the upload queue, by default 999.
$ (function () {    $ ("#file_upload"). Uploadify ({        ' queuesizelimit ': 1,        ' swf '            : '/uploadify/ Uploadify.swf ',        ' uploader '       : '/uploadify/uploadify.php '    });
uploadlimit: Set the number of files allowed to upload, default is 999.
$ (function () {    $ ("#file_upload"). Uploadify ({        ' swf '         : '/uploadify/uploadify.swf ',        ' uploader ')    : '/uploadify/uploadify.php ',        ' uploadlimit ': 1    });
4>, uploadify common event settings
onuploadcomplete: Triggers an event when a single file upload is complete.
$ (function () {    $ ("#file_upload"). Uploadify ({        ' swf '              : '/uploadify/uploadify.swf ',        ' uploader         ') : '/uploadify/uploadify.php ',        ' onuploadcomplete ': function (file) {            alert (' The file ' + File.name + ' finished PR Ocessing. ');});    
onqueuecomplete: Triggers an event when all files in the queue are uploaded.
$ (function () {    $ ("#file_upload"). Uploadify ({        ' swf '      : '/uploadify/uploadify.swf ',        ' uploader ': '/ Uploadify/uploadify.php ',        ' onqueuecomplete ': function (queuedata) {            alert (queuedata.uploadssuccessful + ') Files were successfully uploaded. ');        }    );
onuploadsuccess: Triggers an event after a successful upload of a single file.
<script type= "Text/javascript" >    $ (function () {        $ (' #file_upload '). Uploadify ({            ' buttonimage ': ' @ Url.content ("~/scripts/uploadify-v3.1/browse-btn.png") ',            ' swf ': ' @Url. Content ("~/SCRIPTS/UPLOADIFY-V3.1/ uploadify.swf ") ',            ' uploader ': '/home/upload ',            ' onuploadsuccess ': function (file, data, response) {                eval ( "Data=" + data);                Alert (' file ' + File.name + ' has been uploaded successfully and returns ' + response + ' save filename called ' + data '. Savename);});    </script>
common methods of 4> and Uploadify
upload: Uploading files
Cancel: Canceling the upload
  
@{viewbag.title = "Index"; Layout = "~/views/shared/_layout.cshtml";} @section header{<link href= "@Url. Content (" ~/scripts/uploadify-v3.1/uploadify.css ")" rel= "stylesheet" type= "text /css "/> <script src=" @Url. Content ("~/scripts/jquery-1.8.1.min.js") "Type=" Text/javascript "></script > <script src= "@Url. Content (" ~/scripts/uploadify-v3.1/jquery.uploadify-3.1.min.js ")" Type= "Text/javascript" ></script> <script type= "Text/javascript" > $ (Function () {$ (' #file_upload '). uploadify ({' Auto ': false, ' buttonimage ': ' @Url. Content ("~/scripts/uploadify-v3.1/browse-b Tn.png ") ', ' swf ': ' @Url. Content (" ~/scripts/uploadify-v3.1/uploadify.swf ") ', ' Uploa        Der ': '/home/upload '});    });        </script> <style type= "Text/css" > body {font-size:12px;  }. Tip {height:20px;          border-bottom:1px solid #CCC;        margin-bottom:10px;            }. Uploadify-button {background-color:transparent;            Border:none;        padding:0;        }. Uploadify:hover. uploadify-button {background-color:transparent; } </style>}<div class= "Tip" > Jquey uploadify Upload file example:</div><div> <input type= "file" id= " File_upload "Name=" File_upload "/></div><div> <a href=" javascript:$ (' #file_upload '). Uploadify (' Upload '); " > Upload the first </a> <a href= "javascript:$ (' #file_upload '). Uploadify (' upload ', ' * ');" > Upload queue </a> <a href= "javascript:$ (' #file_upload '). Uploadify (' Cancel ');" > Cancellation of the first </a> <a href= "javascript:$ (' #file_upload '). Uploadify (' Cancel ', ' * ');" > Cancel Queue </a></div>
3. Sample code Attachment
Jqueryuploadifydemo.rar
The use of JQuery uploadify in ASP. NET MVC3