MVC3+jquery Uploadify 上传文件
最近做项目用到了上传图片的功能，以前也写过这类代码，不过都是用传统的file标签，今天整理一个好用的插件Uploadify。。都做了一些注释，一看便知。
可以去官网下载最新的：Uploadify下载地址：http://www.uploadify.com/download/
1.引用文件
<link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script>
2.页面文件
1 @{ 2 ViewBag.Title = "Index"; 3 Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5 @section Header{ 6 <link href="@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" /> 7 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 8 <script src="@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script> 9 } 10 <style type="text/css"> 11 body 12 { 13 font-size: 12px; 14 } 15 .tip 16 { 17 height: 20px; 18 border-bottom: 1px solid #CCC; 19 margin-bottom: 10px; 20 } 21 </style> 22 <div class="tip"> 23 jQuey Uploadify上传文件示例： 24 </div> 25 <div> 26 <span id="uploadify"></span> 27 </div> 28 <div> 29 <button onclick="javascript:$('#uploadify').uploadify('upload','*');">上传队列</button> 30 <button onclick="javascript:$('#uploadify').uploadify('cancel', '*');">取消队列</button> 31 </div> 32 33 @*<div id="uploadfileQueue" style="margin-top:100px;"> 34 35 </div>*@ 36 <script type="text/javascript"> 37 $(function () { 38 $('#uploadify').uploadify({ 39 debug: false, //开启调试 40 successTimeout: 99999, //超时时间 41 formData: { //附带值 42 'userid': '用户id', 43 'username': '用户名', 44 'rnd': '加密密文' 45 }, 46 //queueID: 'uploadfileQueue', //文件选择后的容器ID 47 uploader: '/Home/Upload', // 服务器端处理地址 48 swf: '@Url.Content("~/Scripts/uploadify/uploadify.swf")', // 上传使用的 Flash 49 width: 110, // 按钮的宽度 50 height: 23, // 按钮的高度 51 buttonText: "请选择上传的文件", // 按钮上的文字 52 buttonCursor: 'hand', // 按钮的鼠标图标 53 fileObjName: 'Filedata', // 上传参数名称 54 // 两个配套使用 55 fileTypeExts: "*.jpg;*.png", // 扩展名 56 fileTypeDesc: "请选择 jpg png 文件", // 文件说明 57 auto: false, // 选择之后，自动开始上传 58 multi: true, // 是否支持同时上传多个文件 59 queueSizeLimit: 5, //设置上传队列中同时允许的上传文件数量 允许多文件上传的时候，同时上传文件的个数 60 //uploadLimit：设置允许上传的文件数量，默认为999。 61 62 removeCompleted: false, //设置已完成上传的文件是否从队列中移除，默认为true 63 onQueueComplete: function (queueData) {//队列中全部文件上传完成时触发事件。 64 alert(queueData.uploadsSuccessful + '个文件上传完成'); 65 }, 66 //返回一个错误，选择文件的时候触发 67 onSelectError:function(file, errorCode, errorMsg){ 68 switch(errorCode) { 69 case -100: 70 alert("上传的文件数量已经超出系统限制的" + $('#uploadify').uploadify('settings', 'queueSizeLimit') + "个文件！"); 71 break; 72 case -110: 73 alert("文件 [" + file.name + "] 大小超出系统限制的" + $('#uploadify').uploadify('settings', 'fileSizeLimit') + "大小！"); 74 break; 75 case -120: 76 alert("文件 ["+file.name+"] 大小异常！"); 77 break; 78 case -130: 79 alert("文件 ["+file.name+"] 类型不正确！"); 80 break; 81 } 82 }, 83 onFallback:function(){ 84 alert("您未安装FLASH控件，无法上传图片！请安装FLASH控件后再试。"); //检测FLASH失败调用 85 }, 86 onUploadSuccess: function (file, data, response) { //上传到服务器，服务器返回相应信息到data里 87 alert(data); 88 } 89 90 }); 91 }); 92 </script>
3.控制器方法
1 public ActionResult Upload(HttpPostedFileBase fileData, string formData) 2 { 3 if (fileData != null) 4 { 5 try 6 { 7 // 文件上传后的保存路径 8 string filePath = Server.MapPath("~/Uploads/"); 9 if (!Directory.Exists(filePath)) 10 { 11 Directory.CreateDirectory(filePath); 12 } 13 string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称 14 string fileExtension = Path.GetExtension(fileName); // 文件扩展名 15 string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称 16 fileData.SaveAs(filePath + saveName); 17 return Json(new { Success = true, FileName = fileName, SaveName = saveName }); 18 } 19 catch (Exception ex) 20 { 21 return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet); 22 } 23 } 24 else 25 { 26 27 return Json(new { Success = false, Message = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet); 28 } 29 }
最后：效果图
源码下载地址：https://files.cnblogs.com/itxiaoyan2013/UploadFile.zip
