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 ...
随机推荐
- android -------- 获取手机设备信息
最近在开发中,需要用到一些系统信息,总结了一下 /** * Created by zhangqie on 2019/2/26 * Describe: 系统工具类 */ public class Equ ...
- 机器学习 之XGBoost算法
目录 1.基本知识点简介 2.XGBoost提升树算法 2.1 XGBoost原理 2.2 XGBoost中损失函数的泰勒展开 2.3 XGBoost中正则化项的选定 2.4 最终的目标损失函数及其最 ...
- python自动化测试入门篇-postman
接口测试基础-postman 常用的接口有两种:webservice接口和http api接口. Webservice接口是走soap协议通过http传输,请求报文和返回报文都是xml格式. http ...
- 【Oracle】【8】大批量update某个字段
正文: 需实现:将A表的某个字段的值复制到B表中 我们一般会这样写:UPDATE B SET B.NAME = (SELECT A.NAME FROM A WHERE A.NO = B.NO) 出现的 ...
- Charles 抓包工具
参考博客: https://blog.csdn.net/mxw2552261/article/details/78645118 发包与改包: https://blog.csdn.net/b722305 ...
- RandomAccessFile多线程下载
public class DownloadServer { ; private static String fileUrl = "https://dldir1.qq.com/qqtv/mac ...
- 【Sql】经典sql语句
参考网页:https://www.cnblogs.com/qixuejia/p/3637735.html 1./**查询课程1比课程2,成绩高的学生学号1.分析这些元素都在一个表里,但是上下两条记录, ...
- exadata cellcli
cellcli [port_number] [-n] [-m] [-xml] [-v | -vv | -vvv] [-x] [-e command] The following table lists ...
- Android动画-View动画
View动画 Android动画分为三类:View动画,帧动画,和属性动画.帧动画也是View动画的一种. View动画的作用对象是View,之所以强调这一点是因为其作用对象有别于Android的另一 ...
- chrome扩展应用实例
chrome extensions 基本组成,唯一必要的文件就是manifest.json这个应用的配置清单 manifest.json中前三个参数为必要参数,其他的可选: { "name ...