转载

ASP.NET MVC下使用文件上传

这里我通过使用uploadify组件来实现异步无刷新多文件上传功能。

1、首先下载组件包 uploadify ，我这里使用的版本是3.1

2、下载后解压，将组件包拷贝到MVC项目中

ASP.NET MVC下使用文件上传

3、根目录下添加新文件夹Uploads，然后新建控制器UploadifyController.cs

using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Web; using System.Web.Mvc; namespace Shop.Controllers {  public class UploadifyController : Controller  {   //   // GET: /Uploadify/   public ActionResult Index()   {    return View();   }   [AcceptVerbs(HttpVerbs.Post)]   public JsonResult Upload(HttpPostedFileBase fileData)   {    if (fileData != null)    {     try     {      // 文件上传后的保存路径      string filePath = Server.MapPath("~/Uploads/");      if (!Directory.Exists(filePath))      {       Directory.CreateDirectory(filePath);      }      string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称      string fileExtension = Path.GetExtension(fileName); // 文件扩展名      string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称       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 = "请选择要上传的文件！" }, JsonRequestBehavior.AllowGet);    }   }  } }

4、添加Index视图

@{  ViewBag.Title = "Index";  Layout = null; } <link href="~/Content/uploadify/uploadify.css" rel="stylesheet" /> <script src="~/Scripts/jquery-1.7.1.min.js"></script> <script src="~/Content/uploadify/jquery.uploadify-3.1.min.js"></script> <script type="text/javascript">   $(function () {    $("#file_upload").uploadify({     //指定swf文件     'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',     //后台处理的页面     'uploader': '/Uploadify/Upload',     //按钮显示的文字     'buttonText': '上传图片',     //显示的高度和宽度，默认 height 30；width 120     //'height': 15,     //'width': 80,     //上传文件的类型  默认为所有文件 'All Files'  ;  '*.*'     //在浏览窗口底部的文件类型下拉菜单中显示的文本     'fileTypeDesc': 'Image Files',     //允许上传的文件后缀     'fileTypeExts': '*.gif; *.jpg; *.png',     //发送给后台的其他参数通过formData指定     //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },     //上传文件页面中，你想要用来作为文件队列的元素的id, 默认为false  自动生成,  不带#     //'queueID': 'fileQueue',     //选择文件后自动上传     'auto': false,     //设置为true将允许多文件上传     'multi': true    });   });    </script>   <div>     @*用来作为文件队列区域*@   <div id="fileQueue">   </div>    <input type="file" id="file_upload" name="file_upload" />   <p>    <a href="javascript:$('#file_upload').uploadify('upload')">上传</a>|     <a href="javascript:$('#file_upload').uploadify('cancel')">取消上传</a>   </p>  </div>

5、启动程序查看效果

ASP.NET MVC下使用文件上传

Uploadify常用属性设置

a uto：是否选择文件后自动上传，默认为true。

buttonText ：设置上传按钮显示文字。

buttonImage ：设置上传按钮背景图片。

multi ：是否允许一次选择多个文件一起上传，默认为true。

fileTypeDesc：设置允许上传图片格式描述；

fileTypeExts：设置允许上传图片格式。

removeCompleted ：设置已完成上传的文件是否从队列中移除，默认为true。

queueSizeLimit ：设置上传队列中同时允许的上传文件数量，默认为999。

uploadLimit ：设置允许上传的文件数量，默认为999。

Uploadify常用事件设置

onUploadComplete :单个文件上传完成时触发事件。

$(function() {     $("#file_upload").uploadify({
         'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件
         'uploader': '/Uploadify/Upload',//后台处理的页面         'onUploadComplete' : function(file) {             alert('The file ' + file.name + ' finished processing.');         }     }); });

onQueueComplete ：队列中全部文件上传完成时触发事件。

$(function() {  $("#file_upload").uploadify({   'swf'   : '@Url.Content("~/Content/uploadify/uploadify.swf")',   'uploader' : 'uploader': '/Uploadify/Upload',   'onQueueComplete' : function(queueData) {    alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');   }  }); });

onUploadSuccess ：单个文件上传成功后触发事件。

$(function () { $('#file_upload').uploadify({  'buttonImage': '@Url.Content("~/Content/uploadify/browse-btn.png")',  'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")', //指定swf文件  'uploader': '/Uploadify/Upload',//后台处理的页面  'onUploadSuccess': function (file, data, response) {   eval("data=" + data);   alert('文件 ' + file.name + ' 已经上传成功，并返回 ' + response + ' 保存文件名称为 ' + data.SaveName);  } });
});

设置上传图片大小

ASP.NET MVC默认情况下，允许上传的文件大小最大为4MB。因此在默认情况下，Uploadify也只能最大上传4MB大小的文件，超过范围则会IO报错提示无法上传。

修改Web.config设置允许上传的最大文件大小：

<system.web>   <!--设置最大允许上传文件大小1G-->   <httpRuntime maxRequestLength= "102400" executionTimeout= "60" /> </system.web>

正文到此结束

所属分类：编程技术

本文标签： key 目录 map Collections cat json js App ip CTO 参数 web CSS 文件上传 wget UI value java jquery
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

ASP.NET MVC下使用文件上传

Uploadify常用属性设置

Uploadify常用事件设置

设置上传图片大小

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流