ASP.NET MVC下使用文件上传
这里我通过使用uploadify组件来实现异步无刷新多文件上传功能。
1、首先下载组件包uploadify,我这里使用的版本是3.1
2、下载后解压,将组件包拷贝到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,
//上传完成后执行
'onUploadSuccess': function (file, data, response) {
var a = jQuery.parseJSON(data);
if (a.Success) {
$.dialog.alert(a.Message);
}
else {
$.dialog.alert("导入提单成本费用异常:" + a.Message);
}
}
});
});
</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('upload','*');">上传队列</a>
<a href="javascript:$('#file_upload').uploadify('cancel');">取消第一个</a>
<a href="javascript:$('#file_upload').uploadify('cancel', '*');">取消队列</a>
</p>
</div>
5、 启动程序查看效果

Uploadify常用属性设置
auto:是否选择文件后自动上传,默认为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= "1024000" executionTimeout= "60" />
</system.web>
添加system.webServer节点
<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源码
将下面代码:
this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
修改成如下:
if (this.settings.button_image_url != "") {
this.settings.button_image_url = SWFUpload.completeURL(this.settings.button_image_url);
}
ASP.NET MVC下使用文件上传的更多相关文章
- ASP.NET MVC下使用文件上传和IIS7下的默认设置限制了上传大小的方法
不多说了,直接用别人的 http://www.cnblogs.com/jiekzou/p/4491505.html
- [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传
原文 [代码示例]用Fine Uploader+ASP.NET MVC实现ajax文件上传 Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件 ...
- asp.net.mvc 的单文件上传和多文件上传的简单例子
首先打开vs2012,创建空的mvc4项目,名称为MVCStudy,选择基本模板
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件. This project attempts to achi ...
- [Fine Uploader] 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
Fine Uploader(http://fineuploader.com/)是一个实现 ajax 上传文件的 Javascript 组件 This project attempts to ach ...
- Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现)(转)
Asp.Net实现无刷新文件上传并显示进度条(非服务器控件实现) 相信通过Asp.Net的服务器控件上传文件在简单不过了,通过AjaxToolkit控件实现上传进度也不是什么难事,为什么还要自己辛辛苦 ...
- MVC中的文件上传-小结
web开发中,文件的上传是非常基本功能之一. 在asp.net中,通常做法是利用webservice 来接收文件请求,这样做的好处就是全站有了一个统一的文件上传接口,并且根据网站的实际情况,可以将we ...
- ASP.NET 中对大文件上传的简单处理
在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...
- centos 6.5下安装文件上传下载服务
centos 6.5下安装文件上传下载服务 由于每次在CentOS中要下载一些配置文件到物理机,和上传一些文件到服务器,导致来回的开启ftp软件有点麻烦,这里我们可以使用文件上传下载服务,来解决上传和 ...
随机推荐
- iOS ---Swift学习与复习
swift中文网 http://www.swiftv.cn http://swifter.tips/ http://objccn.io/ http://www.swiftmi.com/code4swi ...
- vsCode 添加浏览器调试和js调试的方法
1.直接按F5可以调试的方法或者点击运行按钮(可以直接运行html文件或者js文件) 在launch.json文件中的配置如下: { "version": "0. ...
- Mybatis中SqlMapper配置的扩展与应用(1)
奋斗了好几个晚上调试程序,写了好几篇博客,终于建立起了Mybatis配置的扩展机制.虽然扩展机制是重要的,然而如果没有真正实用的扩展功能,那也至少是不那么鼓舞人心的,这篇博客就来举几个扩展的例子. 这 ...
- MySQL(二) 数据库数据类型详解
序言 今天去健身了,感觉把身体练好还是不错的,闲话不多说,把这个数据库所遇到的数据类型今天统统在这里讲清楚了,以后在看到什么数据类型,咱度应该认识,对我来说,最不熟悉的应该就是时间类型这块了.但是通过 ...
- BrowserSync前端调试工具使用
上次介绍了一款DebugGap移动端调试工具DebugGap推荐.但是这几天使用了之后感觉还是有些不足,尤其是里面的调试工具虽然和Chrome里面的调试长的很像,但是多少有些不同,使用起来还是不太方便 ...
- SQLExecption:Operation not allowed after ResultSet closed解决办法
原网址:http://blog.csdn.net/sku0923/article/details/1722370 一个stmt多个rs进行操作引起的ResultSet已经关闭错误 一个stmt多个rs ...
- Cocos2d-x 3.2学习笔记(三)学习绘图API
关于cocos2d-x 3.2 版本的绘图方法有两种 1.使用DrawNode类绘制自定义图形. 2.继承Layer类重写draw()方法. 以上两种方法都可以绘制自定义图形,根据自己的需要选择合适的 ...
- JavaScript禁用页面刷新
JavaScript禁用页面刷新代码如下: //禁用F5刷新 document.onkeydown = function () { if (event.keyCode == 116) { event. ...
- C++和java多态的区别
C++和java多态的区别 分类: Java2015-06-04 21:38 2人阅读 评论(0) 收藏 举报 转载自:http://www.cnblogs.com/plmnko/archive ...
- Testing - 测试基础 - 分类
对软件内部结构的深入程度 黑盒测试:又叫功能测试.数据驱动测试或基于需求规格说明书的功能测试. 白盒测试:又称结构测试.逻辑驱动测试或基于程序代码内部构成的测试. 灰盒测试:包含性能测试.自动化测试. ...