c# asp.net mvc4 uses uploadify plugin to realize upload function

[1] First go to the official website to download the plugin: http://www.uploadify.com/download/  . ww I am using the free, flash based version. Because the version based on H5 needs to be paid for, and then using the plug-in is to do a complete website, so it doesn't matter.

[2] Next, refer to the js and css files of uploadify in the view, and then configure uploadify. Note that the path here changes with the location of the uploadify file in your program. I put it at the same level as the bin folder

<link rel="stylesheet" href="~/uploadify/uploadify.css" />
<script src="~/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
    picpath="";
    $(function () {
        $( " #uploadify " ).uploadify({
         ' swf ' :   ' /uploadify/uploadify.swf ' , // relative path to uploadify.swf file 
        ' cancelImg ' : ' /uploadify/uploadify-cancel.png ' , // Cancel the location of the picture 
        ' uploader ' : ' /Account/Upload ' , // relative path for background processing 
        ' buttonText ' : ' Upload ' , // button display text 
        'height' : 15 , // display height, default 30 
        ' width ' : 80 , // display width, default 120 
        ' fileTypeDesc ' : ' Image Files ' ,
         ' fileTypeExts ' : ' *.gif; *.jpg; *.png ' , // The suffix of the file to be uploaded is 
        ' formData ' : {}, // The parameter sent to the background 
        ' queueID ' : ' fileQueue ' , // Display the id of the file queue element, the default is false 
        'auto' : false , // Set whether to upload automatically after selecting files 
        ' multi ' : true , // Set to allow multiple file uploads 
        ' queueSizeLimit ' : 999 , // When multiple file uploads are allowed, set the number of selected files, the default is 999 
        // 'onSelect': function (event, queueID, fileObj) { //Execute after file selection 
        //     alert( "haha"); 
        // }, 
        // 'onUploadStart': function (file) { //Upload start Action before 
        //     alert( "Hello"); 
        // }, 
        ' onUploadSuccess ' : function (file, data, response) { //After uploading and saving, process the return value 
            var rr =  null 
            rr = eval( " ( "  + data +  " ) " );
             // alert(rr.path); 
            picpath = rr.path;
            $("#dishesPic").attr("src",picpath); 
        }  
       });
    });
</script>

[3] In the same view, add the container of the plug-in, pay attention to the name and id of the container, both are uploadify. The plugin will look for tags with name="uploadify"

  <div>
       <input type="file" name="uploadify" id="uploadify" style="width:120px;height:40px; "/>
       <p>
       <a onclick="$('#uploadify').uploadify('upload')"> 上传</a>
       <a onclick="$('#uploadify').uploadify('cancel')"> 取消上传</a>
       </p>
      <div id="fileQueue">
      </div>
</div>

[4] The processing code in the background Controller, ww himself uses this plugin to upload pictures, and returns the data containing the path to save the picture, the format is json

        //上传 
        public JsonResult Upload(HttpPostedFileBase fileData)
        {
            if (fileData == null || string.IsNullOrEmpty(fileData.FileName) || fileData.ContentLength ==0)
            {
                return Json( new { flag = false , message = " No files to upload " });
            }
            string file = Path.GetFileName(fileData.FileName); // Get the file name 
            string extension = Path.GetExtension(fileData.FileName); // Get the file extension 
            string uploadDate = DateTime.Now.ToString( " yyyyMMddHHmmss " );
             string savedbname= " pic\\ " + Path.GetFileNameWithoutExtension(fileData.FileName) + uploadDate + extension; // File name saved to database 
            string fullsaveName = System.Web.HttpContext.Current.Request.MapPath( " ~\\ " ) + savedbname; // full path
            fileData.SaveAs(fullsaveName); 
            return Json(new { flag = true, path = savedbname });
        }

Well, according to the above four steps, you can basically use the uploadify plugin to upload.

If, when uploading a file, you need to pass some additional parameters, then you can use the formData parameter in the format 'formData':{"name":value}. Then in the background Crontroller, use Request["name"] to receive.