html5异步单图片多图片上传两种实现方式 后台.net mvc接收

异步单图片多图片上传两种实现方式

1.单图片上传

1>一般给表单加一个属性enctype="multipart/form-data"（enctype="multipart/form-data"//不限制二进制流上传）

<form enctype="multipart/form-data" method="post"> 就可以提交表单了可以异步也可以直接submit

2.多图片上传

1>通过formdata来包裹表单提交（可以实现单张图片也可以多张图片上传）

var formdata = new FormData(document.getElementById("formtable")); 
 $.ajax({ url: url, 
 data: formdata, type: 'post', 
 datatype: 'json', 
 // XMLHttpRequest会对 formdata 进行正确的处理 
 processData: false, 
 //必须false才会自动加上正确Content-Type
 contentType: false,
 before: function () { 
 var isValid = $('#formdialog form').form('validate'); 
 $.messager.progress({ title: "执行中", text: "" });
//提示进度条 
 if (!isValid) { $.messager.progress('close'); } return isValid; }, success: function (data) { newSuccess(data); } 
 })

表单id为formtable

注意

1.给表单定义一个id

<form id="formtable">

2.在jquery中获取表单赋给formdata(记得引用jquery)

//表单id通过document获取不可以用jquery</script>

<script>var formdata = new FormData(document.getElementById("formtable"));

3.通过异步提交但是要注意将formdata赋给data（formdata是无法通过console.log查看的）

(用来给http请求时通过限制 必须加到异步请求中) 
// XMLHttpRequest会对 formdata 进行正确 
processData: false, 
//必须false才会自动加上正确Content-Type
 contentType: false,

4.后台接收（ HttpFileCollectionBase files = Request.Files;）会遍历所有file文件是一个集合可以通过for循环遍历得到每一个file文件

HttpFileCollectionBase files = Request.Files; 
 for (int i = 0; i < files.Count; i++) { 
 HttpPostedFileBase file = files[i];//获取单个文件
}