js 文件上传的两种类型: FormData、FileReader
原创
©著作权归作者所有:来自51CTO博客作者StavinLi的原创作品,请联系作者获取转载授权,否则将追究法律责任
<input type="file" title="">
一. 通过new FormData()
上传
$("input").on("change", function(evt) {
var $that = $(this);
var formData = new FormData();
var files = evt.target.files[0];
if (!files) {
return;
}
if (files.size >= 20 * 1024 * 1024) { //20M
ydc.tip.showError("文件过大,请选择其他文件。");
return;
}
formData.append("files", evt.target.files[0]);//文件
//formData.append("contractId", id); //其他参数
$.ajax({
type: "POST",
url: "/contract/filing/upload",
enctype: 'multipart/form-data',
processData: false,
contentType: false,
cache: false,
data: formData,
beforeSend: function() {
$that.attr('disabled', 'disabled');
},
success: function(data) {
$that.removeAttr("disabled");
},
error: function(err) {
$that.removeAttr("disabled");
}
})
})
二、通过new FileReader()
上传
$("input").on("change", function(evt) {
var files = evt.target.files[0];
if (!/image\/\w+/.test(files.type)) {
ydc.tip.showError("文件必须为图片!");
$(this).val("")
return;
}
var reader = new FileReader();
reader.onload = function(event) {
var base = event.target.result;
console.log(base)//将此base.split(',')[1] 传送到后台
};
reader.readAsDataURL(files);
});