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下 ...
随机推荐
- tornado 学习笔记2 Python web主流框架
2.1 Django 官方网址:https://www.djangoproject.com/ 简介:Django is a high-level Python Web framework that e ...
- minicom使用
http://blog.chinaunix.net/uid-9525959-id-2001815.html 创建log文件 : minicom -C my_capturefile
- MySQL 服务无法启动。服务没有报告任何错误。
MySQL数据库在升级到5.7版本后,和之前的版本有些不一样,没有data文件夹,我们都知道MySQL数据库文件是保存在data文件夹中的,网上有人说把5.6版本的data文件夹拷贝一个,这种说法听听 ...
- JS中常遇到的浏览器兼容问题和解决方法【转】
今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...
- Nodejs正则表达式函数之match、test、exec、search、split、replace使用详解
1. Match函数 使用指定的正则表达式函数对字符串惊醒查找,并以数组形式返回符合要求的字符串 原型:stringObj.match(regExp) 参数: stringObj 必选项,需要去进行匹 ...
- Hadoop.2.x_网站PV示例
一.网站基本指标(即针对于网站用户行为而产生的日志中进行统计分析) 1. PV:网页浏览量(Page View页面浏览次数,只要进入该网页就产生一条记录,不限IP,统计点每天(较多)/每周/每月/.. ...
- 获取客户端真实ip
// 获取客户端真实ip() protected function getIP() { global $ip; if (getenv("HTTP_CLIENT_IP")) $ip ...
- JSP + AJAX完整实例及代码
(1)发送请求index.jsp,注意引入jquery.min.js文件 <%@ page language="java" contentType="text/ht ...
- 打开FileGeoDatabase中要素类
private IFeatureClass OpenFileGdbFtCls(string fn) { IFeatureClass pftcls = null; IWorkspaceFactory w ...
- 关于ueditor1_4_3 上传出现无法加载配置的问题
我的解决方案是: 1. 检查 ueditor.config.js 中的 serverUrl: URL + "/net/controller.ashx" 的配置,记得一定用绝对路径 ...