@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>异步上传文件</title>
<link href="~/Scripts/jQuery.easyui-3.4.1/themes/gray/easyui.css" rel="stylesheet" />
<link href="~/Scripts/jQuery.easyui-3.4.1/themes/icon.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.js"></script>
<script src="~/Scripts/jQuery.easyui-3.4.1/jquery.easyui.min.js"></script>
<script src="~/Scripts/jQuery.easyui-3.4.1/locale/easyui-lang-zh_CN.js"></script>
<script src="~/Scripts/jquery-form.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script>
/*
$("form").serialize()和 new FormData($('#uploadForm')[0])都是序列化表单，实现表单的异步提交，但是二者有区别
首先，前者，只能序列化表单中的数据 ，比如文本框等input select等的数据，但是对于文件，比如文件上传，无法实现。
另外该对象（new FromData('Form_Dom')）不仅仅可以序列化文件，一样可以用作表单数据的序列化，（就是说包含了serialize()的功能）；
*/
function afterSuccess(data) {
$('#resultDiv').html("<img src=\"" + data + "\" />");
}
$(function () {
$('#loadingDiv').css('display', 'none');//隐藏loadingDIV
$('#loadingDiv').css('display', 'none');//隐藏loadingDIV
//JQuery原生异步上传文件
$('#btnSub').click(function () {
//发送异步请求上传文件
$.ajax({
url: "/UploadImage/ProcessImage",
type: "Post",
data: new FormData($('#frm')[0]),//序列化表单
success: function (data) {
//data是图片相对路径
$('#resultDiv').html('');
$('#resultDiv').html("<img src=\"" + data + "\" />");//展示图片
},
cache: false,//拒绝使用缓存
beforeSend: function (xhr) {
//发送请求之前
$('#loadingDiv').text("正在上传.....");
},
processData: false,
//要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false
contentType: false,
//当我们在 form 标签中设置了enctype = “multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免 JQuery 对其操作，从而失去分界符，而使服务器不能正常解析文件。
});
});
//--------------------使用jQuery_Form插件来异步上传文件---------------------------
$('#btnSubFile').click(function () {
//自动序列化表格内容(包含文件)
$('#frm1').ajaxSubmit({
url: "/UploadImage/ProcessImage", //提交地址：默认是form的action,如果申明,则会覆盖
type: "post", //默认是form的method（get or post），如果申明，则会覆盖
//beforeSubmit: beforeCheck, //提交前的回调函数
success: afterSuccess, //提交成功后的回调函数
//target: "#output", //把服务器返回的内容放入id为output的元素中
//dataType: "json", //html(默认), xml, script, json...接受服务端返回的类型
clearForm: true, //成功提交后，是否清除所有表单元素的值
resetForm: true, //成功提交后，是否重置所有表单元素的值
timeout: 3000 //限制请求的时间，当请求大于3秒后，跳出请求})
});
});
//----------------------使用jQuery-EasyUi插件来异步上传-----------------------
$('#btnsub').click(function () {
//将表单作为ajax异步进行提交(jq_EasyUi)
$('#ff').form('submit', {
ajax: true,
url: "/UploadImage/ProcessImage",
//在提交之前触发,return false 终止提交
onSubmit: function () {
// do some check
// return false to prevent submit;
},
//处理回发数据
success: function (data) {
$('#resultDiv').html("<img height=\"150\" width=\"150\" src=\""+data+"\"/>");//显示上传的图片
}
});
});
})
</script>
</head>
<body>
<div>
@* 1.使用Mvc异步 上传图片 ---成功！---- *@
@{
using (Ajax.BeginForm("ProcessImage", "UploadImage",
new AjaxOptions()
{
Confirm = "确认上传？",
HttpMethod = "Post",
LoadingElementId = "loadingDiv",
UpdateTargetId = "resultDiv",
InsertionMode = InsertionMode.Replace,
OnSuccess = "afterSuccess"
},
@*异步上传文件 enctype = "multipart/form-data" “不可少” Html属性*@
new { enctype = "multipart/form-data" }))
{<!--异步表单的开始-->
<input type="file" name="Image" />
<input type="submit" value="上传" />
}<!--异步表单的结束-->
}
<hr />
<hr />
@*2.使用Jquery_ajax异步上传文件 --- *@
<form enctype="multipart/form-data" id="frm">
<input type="file" name="Image" />
<input type="button" id="btnSub" value="确认上传" />
</form>
<hr />
<hr />
@*3.使用jQuery_Form插件上传文件*@
<form id="frm1" enctype="multipart/form-data">
<input type="file" name="Image" />
<input type="button" id="btnSubFile" value="上传" />
</form>
<hr />
<hr />
<hr />
@* 4.使用jQuery_EasyUi插件异步提交表单 *@
<form id="ff" action="/Upload/ProcessImage" method="post" enctype="multipart/form-data">
<input type="file" name="Image" />
<input type="button" value="上传" id="btnsub" />
</form>
</div>
@* -------------------------------------------------------------------------------------------------------------------- *@
<div id="loadingDiv">
<span>正在上传中...</span>
</div>
<div id="resultDiv">
<!--异步请求成功显示数据的位置-->
</div>
</body>
</html>
