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

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

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

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

  1. using System;
  2. using System.Collections.Generic;
  3. using System.IO;
  4. using System.Linq;
  5. using System.Web;
  6. using System.Web.Mvc;
  7.  
  8. namespace Shop.Controllers
  9. {
  10. public class UploadifyController : Controller
  11. {
  12. //
  13. // GET: /Uploadify/
  14.  
  15. public ActionResult Index()
  16. {
  17. return View();
  18. }
  19.  
  20. [AcceptVerbs(HttpVerbs.Post)]
  21. public JsonResult Upload(HttpPostedFileBase fileData)
  22. {
  23. if (fileData != null)
  24. {
  25. try
  26. {
  27. // 文件上传后的保存路径
  28. string filePath = Server.MapPath("~/Uploads/");
  29. if (!Directory.Exists(filePath))
  30. {
  31. Directory.CreateDirectory(filePath);
  32. }
  33. string fileName = Path.GetFileName(fileData.FileName);// 原始文件名称
  34. string fileExtension = Path.GetExtension(fileName); // 文件扩展名
  35. string saveName = Guid.NewGuid().ToString() + fileExtension; // 保存文件名称
  36.  
  37. fileData.SaveAs(filePath + saveName);
  38.  
  39. return Json(new { Success = true, FileName = fileName, SaveName = saveName });
  40. }
  41. catch (Exception ex)
  42. {
  43. return Json(new { Success = false, Message = ex.Message }, JsonRequestBehavior.AllowGet);
  44. }
  45. }
  46. else
  47. {
  48. return Json(new { Success = false, Message = "请选择要上传的文件!" }, JsonRequestBehavior.AllowGet);
  49. }
  50. }
  51. }
  52. }

4、  添加Index视图

  1. @{
  2. ViewBag.Title = "Index";
  3. Layout = null;
  4. }
  5. <link href="~/Content/uploadify/uploadify.css" rel="stylesheet" />
  6. <script src="~/Scripts/jquery-1.7.1.min.js"></script>
  7. <script src="~/Content/uploadify/jquery.uploadify-3.1.min.js"></script>
  8. <script type="text/javascript">
  9. $(function () {
  10. $("#file_upload").uploadify({
  11. //指定swf文件
  12. 'swf': '@Url.Content("~/Content/uploadify/uploadify.swf")',
  13. //后台处理的页面
  14. 'uploader': '/Uploadify/Upload',
  15. //按钮显示的文字
  16. 'buttonText': '上传图片',
  17. //显示的高度和宽度,默认 height 30;width 120
  18. //'height': 15,
  19. //'width': 80,
  20. //上传文件的类型 默认为所有文件 'All Files' ; '*.*'
  21. //在浏览窗口底部的文件类型下拉菜单中显示的文本
  22. 'fileTypeDesc': 'Image Files',
  23. //允许上传的文件后缀
  24. 'fileTypeExts': '*.gif; *.jpg; *.png',
  25. //发送给后台的其他参数通过formData指定
  26. //'formData': { 'someKey': 'someValue', 'someOtherKey': 1 },
  27. //上传文件页面中,你想要用来作为文件队列的元素的id, 默认为false 自动生成, 不带#
  28. //'queueID': 'fileQueue',
  29. //选择文件后自动上传
  30. 'auto': false,
  31. //设置为true将允许多文件上传
  32. 'multi': true,
    //上传完成后执行
    'onUploadSuccess': function (file, data, response) {
                    var a = jQuery.parseJSON(data);
                    if (a.Success) {
                        $.dialog.alert(a.Message);
                    }
                    else {
                        $.dialog.alert("导入提单成本费用异常:" + a.Message);
                    }
                }
  33. });
  34. });
  35. </script>
  36. <div>
  37. @*用来作为文件队列区域*@
  38. <div id="fileQueue">
  39. </div>
  40. <input type="file" id="file_upload" name="file_upload" />
  41. <p>
     <a href="javascript:$('#file_upload').uploadify('upload');">上传第一个</a>
        <a href="javascript:$('#file_upload').uploadify('upload','*');">上传队列</a>
        <a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
        <a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
    </p>
  42. </div>

5、  启动程序查看效果

Uploadify常用属性设置

auto:是否选择文件后自动上传,默认为true。

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

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

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

fileTypeDesc:设置允许上传图片格式描述;

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

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

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

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

Uploadify常用事件设置

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

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

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

  1. $(function() {
  2. $("#file_upload").uploadify({
  3. 'swf' : '@Url.Content("~/Content/uploadify/uploadify.swf")',
  4. 'uploader' : 'uploader': '/Uploadify/Upload',
  5. 'onQueueComplete' : function(queueData) {
  6. alert(queueData.uploadsSuccessful + ' files were successfully uploaded.');
  7. }
  8. });
  9. });

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

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

设置上传图片大小

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

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

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

添加system.webServer节点

  1. <system.webServer>
    <security>
    <requestFiltering>
    <!--修改服务器允许最大长度-->
    <requestLimits maxAllowedContentLength=""/>
    </requestFiltering>
    </security>
    </system.webServer>

注意:由于IIS7下的默认设置限制了上传大小。这个时候Web.Config中的大小设置也就失效了。

可以按照如下方法进行设置:

1、打开IIS管理器,找到Default Web Site。先进行停止。

2、在IIS中双击“请求筛选”打开。

3、点击右边的“编辑功能设置”,打开“编辑请求筛选设置”对话框。

其中的允许的最大容量长度,默认是”30000000“,30M,将其修改为你所需要的大小即可。

4、启动IIS.

问题

即便按照上面把所有操作都准备好了,在用到uploadify的界面加载时还是会报错,一个诡异的GET请求,返回一个HTTP 404 Not Found的错误

解决方案:修改jquery.uploadify-3.1.js源码

将下面代码:

  1. this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);

修改成如下:

  1. if (this.settings.button_image_url != "") {
  2. this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
  3. }

ASP.NET MVC下使用文件上传的更多相关文章

  1. ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法

    不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html

  2. [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传

    原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...

  3. asp.net.mvc 的单文件上传和多文件上传的简单例子

    首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板

  4. 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...

  5. [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]

    Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件   This project attempts to ach ...

  6. Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)

    Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...

  7. MVC中的文件上传-小结

    web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...

  8. ASP.NET 中对大文件上传的简单处理

    在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...

  9. centos 6.5下安装文件上传下载服务

    centos 6.5下安装文件上传下载服务 由于每次在CentOS中要下载一些配置文件到物理机,和上传一些文件到服务器,导致来回的开启ftp软件有点麻烦,这里我们可以使用文件上传下载服务,来解决上传和 ...

随机推荐

  1. web应用程序性能优化

    web应用程序基本上都是在浏览器地址栏输入一段网站,然后进入,最后浏览器显示你想要的东西. 这就是用户所能体会到的东西.那作为程序员我们看到了什么呢? 一次HTTP 请求主要的流程是: 1.DNS服务 ...

  2. Liferay7 BPM门户开发之43: Gradle依赖管理

    进入liferay v7.0,官方推荐使用Gradle进行依赖管理和发布,所以必须知道Gradle的用法,网上资料很多,不赘述 只写依赖管理的分类 一般用外部仓库依赖,也可以用本地文件依赖(依赖本地j ...

  3. Ubuntu 14.04上安装caffe

    本来实在windows 10上尝试安装caffe,装了一天没装上,放弃; 改在windows上装ubuntu的双系统,装了一个下午,不小心windows的系统盘被锁死了,也不会unlock?只好含泪卸 ...

  4. Prim算法(三)之 Java详解

    前面分别通过C和C++实现了普里姆,本文介绍普里姆的Java实现. 目录 1. 普里姆算法介绍 2. 普里姆算法图解 3. 普里姆算法的代码说明 4. 普里姆算法的源码 转载请注明出处:http:// ...

  5. PHP 自制日历

    最近的一个项目中,需要将数据用日历方式显示,网上有很多的JS插件,后面为了自己能有更大的控制权,决定自己制作一个日历显示.如下图所示: 一.计算数据 1.new一个Calendar类 2.初始化两个下 ...

  6. Azure China (11) 使用Azure China Storage Public Blob

    <Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China 注意:本文介绍的是Azure China Storage Publi ...

  7. Windows Azure Cloud Service (38) 微软IaaS与PaaS比较

    <Windows Azure Platform 系列文章目录> 最近一直想总结Azure IaaS和PaaS的区别与比较,写个博文详细说明一下.建议读者在阅读之前,先熟悉微软PaaS和Ia ...

  8. 服务器程序DEBUG

    服务器程序DEBUG 服务器端设定 Tomcat 默认我们启动Tomcat是使用下边的命令 ./catalina.sh start 如果想DEBUG的话,只需要加一个参数打开JPDA(Java Pla ...

  9. Elasticsearch——Date Math在索引中的用法详解

    在elasticsearch中,有时会想要通过索引日期来筛选查询的数据,此时就需要用到日期数学表达式. 更多内容参考Elasticsearch翻译汇总 基于日期数学表达式的索引 模式如下: <s ...

  10. ansible入门

    前言 最近看了一下ansible,挺火的一个配置管理工具,对比老大哥puppet,使用起来要简单一些,并且可以批量执行命令,对比同是python语言编写的saltstack,不需要安装客户端(基于pa ...