选择文件后,直接上传,主要利用input的onchange事件完成;
html:
<form id='imgform'>
<input type='file' onchange='imgUld()'/>
</form>
js:
var imgArr =[];//存放上传文件的路径,用于本地生成预览,生成预览的代码读者自行完成;
imgUld(ev){
let form = document.getElementById('imgform'); //获取form表单
let data = new FormData(form);//拿到表单创建FormData对象;
let files = ev.target.files; //拿到选择的文件
for (let i = 0; i < files.length; i++) {
imgArr.push(getObjectURL(files[i]));//获得本地缓存的文件路径
}
let url='请求的路径';
$.ajax({
url: url,
type: "POST",
data: data,
contentType: false,
processData: false,
xhrFields: {
withCredentials: true //发送请求时,携带用户标识的cookie
},
success: function (json) {
//上传成功
},
error: function (data) {
//上传失败
}
});
}
getObjURL(file) {
var url = ‘’;if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}