首页 > 代码库 > MVC3+jquery Uploadify 上传文件
MVC3+jquery Uploadify 上传文件
最近做项目用到了上传图片的功能,以前也写过这类代码,不过都是用传统的file标签,今天整理一个好用的插件Uploadify。。都做了一些注释,一看便知。
可以去官网下载最新的:Uploadify下载地址:http://www.uploadify.com/download/
1.引用文件
<link href=http://www.mamicode.com/"@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" /> <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> <script src=http://www.mamicode.com/"@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=http://www.mamicode.com/"@Url.Content("~/Scripts/uploadify/uploadify.css")" rel="stylesheet" type="text/css" /> 7 <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script> 8 <script src=http://www.mamicode.com/"@Url.Content("~/Scripts/uploadify/jquery.uploadify.min.js")" type="text/javascript"></script> 9 }10 <style type="text/css">11 body12 {13 font-size: 12px;14 }15 .tip16 {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‘, //文件选择后的容器ID47 uploader: ‘/Home/Upload‘, // 服务器端处理地址48 swf: ‘@Url.Content("~/Scripts/uploadify/uploadify.swf")‘, // 上传使用的 Flash49 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, //设置已完成上传的文件是否从队列中移除,默认为true63 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 else25 {26 27 return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);28 }29 }
最后:效果图
源码下载地址:http://files.cnblogs.com/itxiaoyan2013/UploadFile.zip
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。