使用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("异常！");
// }
});
});

　　

转载于:https://www.cnblogs.com/fuxp/p/10941025.html