ASP.NET MVC中,怎么使用jquery/ajaxForm上传文件
ajaxForm插件最好选择:jquery forms plugin.
以下为示例:
Ajax.BeginForm
@using (Ajax.BeginForm("YourAction", "YourController", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data"}))
{
@Html.AntiForgeryToken()
<input type="file" id="file" name="files"><br>
<input type="submit" value="Upload File to Server">
}
或者
@using (Html.BeginForm("YourAction", "YourController", new{ area = "YourArea" }, FormMethod.Post,new { enctype = "multipart/form-data"}))
{
@Html.AntiForgeryToken()
<input type="file" id="file" name="files"><br>
<input type="submit" value="Upload File to Server">
}
Action Method
[HttpPost]
[ValidateAntiForgeryToken]
public void YourAction(IEnumerable<HttpPostedFileBase> files)
{
if (files != null)
{
foreach (var file in files)
{
// Verify that the user selected a file
if (file != null && file.ContentLength > )
{
// extract only the fielname
var fileName = Path.GetFileName(file.FileName);
// TODO: need to define destination
var path = Path.Combine(Server.MapPath("~/Upload"), fileName);
file.SaveAs(path);
}
}
}
}
需要注意:
1,)如果是当前view页面不是~{/Area}/Views/Your/Your.cshtml页面,只能返回void,string,不可以ViewResult,JsonResult,ContentResult等。
1.1,)如果需要返回参数,可以把void 改成string。
1.2,)如果要返回对象,要把对象序列化为字符串,返回字符串;客户端提交时指定返回数据格式:$("#file")ajaxFrom({data:{},dataType:'json',...})。
Progress Bar
<div class="progress progress-striped">
<div class="progress-bar progress-bar-success">0%</div>
</div>
<div id="status"></div>
Jquery & Form script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script> <script>
(function() { var bar = $('.progress-bar');
var percent = $('.progress-bar');
var status = $('#status'); $('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
success: function() {
var percentVal = '100%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
}); })();
</script>
参考:http://stackoverflow.com/questions/19042116/ajax-beginform-in-mvc-to-upload-files
ASP.NET MVC中,怎么使用jquery/ajaxForm上传文件的更多相关文章
- jquery ajaxform上传文件返回不提示信息的问题
在使用jquery的ajaxform插件进行ajax提交表单并且上传文件的时候,返回类型datatype :json但是后台通过写出一个json对象后,在执行完以后没有进入success函数,而是直接 ...
- 在MVC中利用uploadify插件实现上传文件的功能
趁着近段的空闲时间,开发任务不是很重,就一直想把以前在仓促时间里所写的多文件上传功能改一下,在网上找了很多例子,觉得uploadify还可以,就想用它来试试.实现自己想要的功能.根据官网的开发文档,同 ...
- jquery.uploadify上传文件配置详解(asp.net mvc)
页面源码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- 项目一:第四天 1、快递员的条件分页查询-noSession,条件查询 2、快递员删除(逻辑删除) 3、基于Apache POI实现批量导入区域数据 a)Jquery OCUpload上传文件插件使用 b)Apache POI读取excel文件数据
1. 快递员的条件分页查询-noSession,条件查询 2. 快递员删除(逻辑删除) 3. 基于Apache POI实现批量导入区域数据 a) Jquery OCUpload上传文件插件使用 b) ...
- 使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能。并且在界面上有radio 的选择内容也要上传
使用 jquery 的 上传文件插件 uploadify 3.1 配合 java 来做一个简单的文件上次功能.并且在界面上有radio 的选择内容也要上传 uploadify 插件的 下载和文档地址 ...
- Jquery异步上传文件
我想通过jQuery异步上传文件,这是我的HTML: 1 2 3 <span>File</span> <input type="file" id=&q ...
- ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案
摘要: ueditor1.3.6jsp版在struts2应用中上传图片报"未找到上传文件"解决方案 在struts2应用中使用ueditor富文本编辑器上传图片或者附件时,即使配置 ...
- IE下AjaxForm上传文件直接提示下载的兼容性Bug
使用AjaxForm上传文件时候,在IE下直接提示下载保存: 我的示例代码: return this.Json( new { prop1 = 5, prop2 = 10 }); 这种问题只出现在IE下 ...
随机推荐
- [BZOJ2790][Poi2012]Distance
2790: [Poi2012]Distance Time Limit: 40 Sec Memory Limit: 128 MBSubmit: 225 Solved: 115[Submit][Sta ...
- BZOJ4532: [BeiJing2014 WinterCamp] 珠链
Description Alex喜欢玩网络游戏,认为这是智力和体力的综合锻炼.在一次游戏活动中,他意外获得了一个传说中威力极其强大的法宝:珠链. 珠链,顾名思义,就是由许多小珠子串起来的一条链.珠子 ...
- 在配置IIS负载均衡时,引起的一系列问题
问题一: IIS中要上传文件的路径是另一台服务器的地址(如:本机IP是192.168.0.100,文件保存的路径在://192.168.0.101/images/folder),在上传时抛出异常: A ...
- js根据浏览器窗口大小实时改变网页文字大小
目前,有了css3的rem,给我们的移动端开发带来了前所未有的改变,使得我们的开发更容易,更易兼容很多设备,但这个不在本文讨论的重点中,本文重点说说如何使用js来实时改变网页文字的大小. 代码: &l ...
- js如何使得新打开的窗口居中
<a href="#" class="blue" onclick="window.open('/Content/service.html', ' ...
- 用Maven生成Eclipse中的Web项目
转自:http://my.oschina.net/u/939893/blog/170185 进入workspace, 输入以下命令 mvn archetype:generate -DgroupId= ...
- HDU3177 贪心
Crixalis's Equipment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- 定位position
position : absolute | relative | fixed | static 定位:子集可以超出父级的范围,如父级蛇overflow:hidden则看不到. absolute : 绝 ...
- mztree使用示例
mztree使用:http://www.myexception.cn/open-source/1014169.html jquery的treeview使用:http://www.cnblogs.com ...
- 演示对sys用户和普通用户进行审计的示例
1.确认数据库版本 1对SYS用户审计 1.1配置审计参数 1.2修改liunx日志配置文件 添加以下一列: 1.3 SYS 用户操作演示 2对普通用户审计 2.1配置审计参数 2.2演示对TEST用 ...