MVC Ajax.BeginForm 提交上传图片
吃水不忘挖井人,如果对你有帮助,请说声谢谢。如果你要转载,请注明出处。谢谢!
异步提交时,出现图片不能上传。
起初我定格在 System.Web.Mvc 中。查询源码时,也是没有问题的。那问题出现在哪 里?
答案:JS
jquery.unobtrusive-ajax.js
经查看,修改如下Demo:
function asyncRequest(element, options) {
var confirm, loading, method, duration, enctype, is_async = true; confirm = element.getAttribute("data-ajax-confirm");
if (confirm && !window.confirm(confirm)) {
return;
} loading = $(element.getAttribute("data-ajax-loading"));
duration = element.getAttribute("data-ajax-loading-duration") || 0; $.extend(options, {
type: element.getAttribute("data-ajax-method") || undefined,
url: element.getAttribute("data-ajax-url") || undefined,
beforeSend: function (xhr) {
var result;
asyncOnBeforeSend(xhr, method);
result = getFunction(element.getAttribute("data-ajax-begin"), ["xhr"]).apply(this, arguments);
if (result !== false) {
loading.show(duration);
}
return result;
},
complete: function () {
loading.hide(duration);
getFunction(element.getAttribute("data-ajax-complete"), ["xhr", "status"]).apply(this, arguments);
},
success: function (data, status, xhr) {
asyncOnSuccess(element, data, xhr.getResponseHeader("Content-Type") || "text/html");
getFunction(element.getAttribute("data-ajax-success"), ["data", "status", "xhr"]).apply(this, arguments);
},
error: getFunction(element.getAttribute("data-ajax-failure"), ["xhr", "status", "error"])
}); enctype = element.getAttribute("enctype");
if (enctype == "multipart/form-data") {
var form = $(element)[0];
var input_files = $(form).find(":file");
var fileSize = 0;
for (var i = 0; i < input_files.length; i++) {
for (var j = 0; j < input_files[i].files.length; j++) {
fileSize += input_files[i].files[j].size;
}
}
if (fileSize > 1024) {
alert("上传文件大于10M,不允许上传");
return;
}
var formData = new FormData(form);
$.extend(options, {
async: false,
cache: false,
contentType: false,
processData: false,
data: formData
});
is_async = false;
}
if (is_async)
options.data.push({ name: "X-Requested-With", value: "XMLHttpRequest" }); method = options.type.toUpperCase();
if (!isMethodProxySafe(method)) {
options.type = "POST";
if (is_async)
options.data.push({ name: "X-HTTP-Method-Override", value: method });
}
$.ajax(options);
}
@{
ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script> @model MvcApplication.Models.TestModel
@using (Ajax.BeginForm("TestAjax", "Home", null, new AjaxOptions() { HttpMethod = "POST" ,OnSuccess="Success"}, new { id = "f1", enctype = "multipart/form-data"}))
{
@Html.TextBoxFor(S => S.Name)
@Html.TextBoxFor(S => S.Age)
@Html.TextBoxFor(S => S.fileBase, new { type = "file" })
@Html.TextBoxFor(S => S.IsDel, new { Value = "1" })
<button type="submit">OK</button>
}
<script type="text/javascript">
function Success(data) {
alert(data.Name);
}
</script>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc; namespace MvcApplication.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/ public ActionResult Index()
{
return View();
} public ActionResult TestAjax(Models.TestModel model)
{
model.fileBase = null;
return Json(model, JsonRequestBehavior.AllowGet);
} }
}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace MvcApplication.Models
{
public class TestModel
{
public HttpPostedFileBase fileBase { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public bool IsDel { get; set; }
}
}
MVC Ajax.BeginForm 提交上传图片的更多相关文章
- asp.net MVC Ajax.BeginForm 异步上传图片的问题
当debug到这里,你们就发现不管是 Request.Files["Upload"]亦或 Request.Files[0] 都不会取到文件流. 这就是我要说的,当使用Ajax.Be ...
- Asp.net Mvc Ajax.BeginForm提交表单
之前Mvc中一直用Html.BeginForm提交表单,即如下: @using (Html.BeginForm("Add", "News", FormMetho ...
- MVC Ajax.BeginForm重复提交解决方法
mvc使用MVC Ajax.BeginForm提交的时候有重复提交结果的时候检查相关js文件引用情况, 其中mvc4注意 1 2 3 4 @Scripts.Render("~/bundles ...
- asp.net mvc Ajax.BeginForm不能异步刷新,或转到新页面,或页面还是刷新了,的原因(或解决办法)(转)
昨天搞了一下午的Ajax.BeginForm都没能实现异步刷新,一直将返回的数据提交到新的页面,在网上搜了n多方法都不行,问了n多人都没能搞定,今天大一早,就意外的被我发现了问题所在. 布局页: &l ...
- 关于MVC Ajax.BeginForm()异步上传文件的问题
问题描述: 如果用juqery原生的异步上传方式,只要如下方法即可 $.ajax({ type: "GET", url: "test.json", data: ...
- 【转】利用Ajax.BeginForm提交文件
Ajax.BeginForm @using (Ajax.BeginForm("YourAction", "YourController", new AjaxOp ...
- mvc中ajax.beginform一次提交重复Post两次的问题解决
在MVC4中使用ajax.beginform来做添加商品到购物车中的提交操作,结果点击提交按钮后,出现两次post,这样导致商品的数量增加了一倍. 原因:@Scripts.Render("~ ...
- ASP.NET MVC下Ajax.BeginForm方式无刷新提交表单
有时候,不得不考虑到以下场景问题: 数据库表字段会频繁更改扩展,而流行的重业务的js框架过于依赖json数据接口,导致的问题是,数据库表更改 -> 数据接口更改 -> 前段框架逻辑更改.. ...
- MVC Html.BeginForm 与 Ajax.BeginForm 使用总结
最近采用一边工作一边学习的方式使用MVC5+EF6做一个Demo项目, 期间遇到不少问题, 一直处于研究状态, 没能来得及记录. 今天项目进度告一段落, 得以有空记录学习中遇到的一些问题. 由于MVC ...
随机推荐
- 如何隐藏Excel中单元格公式且其他单元格可修改
需求:1.隐藏指定单元格公式.2.非公式单元格可修改,不影响公式计算. 操作步骤:1.全选工作表.右键.单元格格式.保护.锁定勾选取消. 2.编辑.定位(或按F5弹出该对话框).定位条件.公式(勾选) ...
- C#退出程序方法分类
1.this.Close(); 只是关闭当前窗口,若不是主窗体的话,是无法退出程序的,另外若有托管线程(非主线程),也无法干净地退出:
- 【转】 VGA时序及其原理
显示器扫描方式分为逐行扫描和隔行扫描:逐行扫描是扫描从屏幕左上角一点开始,从左向右逐点扫描,每扫描完一行,电子束回到屏幕的左边下一行的起始位置,在这期间,CRT对电子束进行消隐,每行结束时,用行同步信 ...
- Flask之项目配置,目录构建,闪现
综合案例:学生成绩管理 新建项目目录students,并创建虚拟环境 mkvirtualenv students 安装开发中使用的依赖模块 pip install flask==0.12.4pip i ...
- 『TensorFlow』流程控制
『PyTorch』第六弹_最小二乘法对比PyTorch和TensorFlow TensorFlow 控制流程操作 TensorFlow 提供了几个操作和类,您可以使用它们来控制操作的执行并向图中添加条 ...
- Netflix:我们为什么要将 GraphQL 引入前端架构? (转)
在刚开始时,Monet 的 React UI 层需要访问由 Tomcat 服务器提供的传统 REST API.随着时间的推移,随着应用程序的发展,我们的用例变得越来越复杂,即使是一个简单页面也需要从各 ...
- 四:(之八_Linux压力测试工具stress)Dockerfile语法梳理和实践
8.1 安装stress stress目前是在该目录下的可执行文件 --vm 创建几个进程 --vm-bytes 为每个进程分配多少内存 8.2 debug输出stress创建进程的过程 一直在创建有 ...
- timeline server介绍
1. timeline是什么 2. timeline能做什么 3. timeline结构 4. timeline怎么配置 1). timeline是什么? 它能存储和检索应用当前和历史信息在yar ...
- Rsync,Linux日志及Screen工具介绍
第十六次课 Rsync,Linux日志及Screen工具介绍 目录 一.rsync工具介绍 二.rsync常用选项 三.rsync通过ssh同步 四. rsync通过服务同步 五.linux系统日志 ...
- Qml和C++开发的学生信息管理软件一
一个月前接触到了Qml,也做过一些练习,但只能实现动画和简单的布局功能,逻辑部分和数据处理很难上手,看到许多人将C++和结合起来,Qml负责界面设计,C++实现逻辑处理,但将C++注册到 Qml中一直 ...