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="1073741824"/>
</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 WebAPi(selfhost)之文件同步或异步上传
- ASP.NET实现二维码 ASP.Net上传文件 SQL基础语法 C# 动态创建数据库三(MySQL) Net Core 实现谷歌翻译ApI 免费版 C#发布和调试WebService ajax调用WebService实现数据库操作 C# 实体类转json数据过滤掉字段为null的字段
- JavaScript日历控件开发 C# 读取 appconfig文件配置数据库连接字符串,和配置文件 List<T>.ForEach 调用异步方法的意外 ef 增加或者更新的习惯思维 asp.net core导入excel 一个二级联动
- WebAPI调用笔记 ASP.NET CORE 学习之自定义异常处理 MySQL数据库查询优化建议 .NET操作XML文件之泛型集合的序列化与反序列化 Asp.Net Core 轻松学-多线程之Task快速上手 Asp.Net Core 轻松学-多线程之Task(补充)
- C# -- HttpWebRequest 和 HttpWebResponse 的使用 C#编写扫雷游戏 使用IIS调试ASP.NET网站程序 WCF入门教程 ASP.Net Core开发(踩坑)指南 ASP.Net Core Razor+AdminLTE 小试牛刀 webservice创建、部署和调用 .net接收post请求并把数据转为字典格式
- 最近面试java后端开发的感受:如果就以平时项目经验来面试,通过估计很难——再论面试前的准备 亡羊补牢,面试时如果发现回答不好,该怎么办? [UWP]在应用开发中安全使用文件资源 请教:WCF速度似乎比Remoting慢 WinForm的EXE破解(基于IL修改) WebApi实现单个文件的上传下载 Log4Net使用学习笔记 ASP.NET Core2基于RabbitMQ对Web前
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- .net 反射访问私有变量和私有方法 如何创建C# Closure ? C# 批量生成随机密码,必须包含数字和字母,并用加密算法加密 C#中的foreach和yield 数组为什么可以使用linq查询 C#中的 具名参数 和 可选参数 显示实现接口 异步CTP(Async CTP)为什么那样工作? C#多线程基础,适合新手了解 C#加快Bitmap的访问速度 C#实现对图片文件的压
- C#编译器优化那点事 c# 如果一个对象的值为null,那么它调用扩展方法时为甚么不报错 webAPI 控制器(Controller)太多怎么办? .NET MVC项目设置包含Areas中的页面为默认启动页 (五)Net Core使用静态文件 学习ASP.NET Core Razor 编程系列八——并发处理
- c# net , layui文件上传,手写-普通文件上传,上传并添加水印,上传并生成缩略图,上传并删除指定文件,
- Jquery配合Asp.Net无刷新删除指定服务器上的文件!
- 在Js(JavaScript)和aspx中引用Asp.Net的.cs文件中传过来的变量参数!(实例)
- Asp.Net读取服务器EXE文件的方法!(超简单实例)
- asp.net判断服务器上的目录或文件是否存在!(实例)
- Mingyang.net:Eclipse定义Maven安装
- 前端AngularJS后端ASP.NET Web API上传文件
- ASP.NET Core 导入导出Excel xlsx 文件
- ASP.NET控制文件上传的大小
- VB.NET服务器端令客户端下载PDF文件
- .NET Framework 工具 Resgen.exe(资源文件生成器)
- IIS7 大文件上传 asp.net iis配置
- 【bat】bat批处理异备文件、压缩文件(net use)
- Asp.net实现直接在浏览器预览Word、Excel、PDF、Txt文件(附源码)
- ASP.NET 保存txt文件