转载

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>
正文到此结束
Loading...