1. 模仿表单提交:
- 创建一个FormData对象
- 调用它的 append() 方法来添加字段
// formData.append(key, value);
var fd = new FormData();
fd.append("username", "Groucho");
2. 使用 FileReader 对象进行预览
// 预览
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
var datainfo = this.result;
$("#IDcardShow").css({
"background": "url(" + datainfo + ") center center no-repeat",
"background-size": "cover"
});
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
3. 模拟表单提交图片
// 1. 创建一个空的fd对象
var fd = FormData();
// 2. 点击上传图片
$("input[type=file]").on("change", function (e) {
var $this = $(this);
// 检测文件大小 1024*1024=1048576(1M)
if (e.target.files[0].size >= 1048576) {
BJUI.alertmsg("warn", "上传图片大小不得超过1M");
return false;
}
// 预览图片
var reader = new FileReader();
reader.onload = (function (file) {
return function (e) {
var datainfo = this.result;
$("#IDcardShow").css({
"background": "url(" + datainfo + ") center center no-repeat",
"background-size": "cover"
});
};
})(e.target.files[0]);
reader.readAsDataURL(e.target.files[0]);
// 添加到fd对象中等待提交
fd.append("cert_scan", e.target.files[0]);
});
// 3. 提交
$.ajax({
type: "post",
url: "xxxx/xxxxx",
data: fd,
dataType: "json",
processData: false, // processData和contentType需设置为false
contentType: false,
success: function (data) {
infor_notice(data.code, data.message);
if (data.code == "1") {
BJUI.dialog('closeCurrent');
} else {
this.text("确认上传");
$this.attr("disabled", false);
}
}
})
4. FormData的兼容性
IE8不支持FormData, IE10才支持,因此此方法不兼容IE10以下的IE浏览器,可以使用jquery.form.js支持的ajaxsubmit进行文件上传 。