使用Ajax和FormData对象实现单图片上传,多图片上传,以及和对象的综合上传

Ajax上传单图片Html代码:

ajax上传单个图片

  


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代码:

ajax上传多个图片

  


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

  


Ajax单个图片,多个图片,对象,综合上传HTML代码:

添加对象以及单个图片和多个图片

企业名称:
手机号:
邮箱:
企业logo 企业图片

  


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

  

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

你可能感兴趣的:(使用Ajax和FormData对象实现单图片上传,多图片上传,以及和对象的综合上传)