使用Ajax和FormData對象實現單圖片上傳，多圖片上傳，以及和對象的綜合上傳

Ajax上傳單圖片Html代碼：

<h1>
ajax上傳單個圖片
</h1>
<form id="fileForm" name="fileForm" action="#" method="post" enctype="multipart/form-data">
<input type="file" name="file">
<input type="button" value="提交">
</form>

　　

Ajax上傳單圖片JS代碼：

/**
* ajax上傳單個圖片
*/
$("#fileForm input[type='button']").click(function () {
/**
* 特別注意：fileForm指的是form表單屬性name的值
* file是指input控件的name
* */
var file = document.fileForm.file.files[0];
//ormData是Html5新加進來的一個類,能夠模擬表單數據
var fm = new FormData();
fm.append('file', file);
//進行Ajax請求
$.ajax({
//幾個參數須要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型,能夠不設置
url: "/admin/company/addCompany",//url
data: fm,
async: false,
cache: false,
contentType: false, //禁止設置請求類型
processData: false, //禁止jquery對DAta數據的處理,默認會處理
success: function (p) {
alert("上傳成功")
}
// error: function () {
// alert("異常！");
// }
});
});

　　

Ajax上傳多圖片Html代碼：

<h1>ajax上傳多個圖片</h1>
<form id="filesForm" name="filesForm" action="#" method="post" enctype="multipart/form-data">
<input type="file" name="files" multiple="multiple"/>
<input type="button" value="提交">
</form>

　　

Ajax上傳多張圖片Js代碼：

/**
* ajax上傳多個圖片
*/

$("#filesForm input[type='button']").click(function () {
var form=new FormData();
/**
* 特別注意：fileForm,file是指form表單屬性name的值
* files是指一個數組
* */
var files = document.filesForm.files.files;
for (var i=0;i<files.length;i++){
form.append("files",files[i])
}
// //進行Ajax請求
$.ajax({
//幾個參數須要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型,能夠不設置
url: "/admin/company/addManyCompany",//url
data: form,
async: false,
cache: false,
contentType: false, //禁止設置請求類型
processData: false, //禁止jquery對DAta數據的處理,默認會處理
success: function () {
alert("上傳成功")
}
// error: function () {
// alert("異常！");
// }
});
});

　　

Ajax單個圖片，多個圖片，對象，綜合上傳HTML代碼：

<h1>添加對象以及單個圖片和多個圖片</h1>
<form id="fileAndFilesAndObject" name="fileAndFilesAndObject" action="#" method="post" enctype="multipart/form-data">
企業名稱：<input type="text" name="name"><br>
手機號： <input type="text" name="mobile"><br>
郵箱： <input type="email" name="email"><br>
企業logo<input type="file" name="file">
企業圖片<input type="file" name="files" multiple="multiple">
<input type="button" value="提交">
</form>

　　

Ajax綜合上傳Js代碼：

/**
* 上傳單個圖片，多個圖片，以及對象
*/
$("#fileAndFilesAndObject input[type='button']").click(function () {
var form=new FormData();
/**
* 特別注意：fileAndFilesAndObject,file是指form和input中name的值
* files是指一個數組
* */
var file = document.fileAndFilesAndObject.file.files[0];
form.append("file",file);
var files=document.fileAndFilesAndObject.files.files;
for (var i=0;i<files.length;i++){
form.append("companyFiles",files[i])
}
var name=$("#fileAndFilesAndObject input[type='name']").val();
var mobile=$("#fileAndFilesAndObject input[type='mobile']").val();
var email=$("#fileAndFilesAndObject input[type='email']").val();
form.append("name",name);
form.append("mobile",mobile);
form.append("email",email);
// //進行Ajax請求
$.ajax({
//幾個參數須要注意一下
type: "POST",//方法類型
dataType: "json",//預期服務器返回的數據類型,能夠不設置
url: "/admin/company/addCompanyOneAndMore",//url
data: form,
async: false,
cache: false,
contentType: false, //禁止設置請求類型
processData: false, //禁止jquery對DAta數據的處理,默認會處理
success: function () {
alert("上傳成功")
}
// error: function () {
// alert("異常！");
// }
});
});