formaData 和jquery 联合起来过来上传图片了。
首先我们要先装子弹(获取数据),然后发射(发送请求)就OK了,我们用formData组装子弹
有好多方法造数据,就如同造人的方法也很多,什么试管啦,
各种姿势哈-,不要压抑你的想象力。
姿势一、
//创建一个壳子
formData = new FormData();
//给壳子里放些五花八门的
//小幺鸡的名字
formData.append('name', 'XiaoYaoJi');
//放一张小幺鸡的美照
formData.append('photo',file);
//oh What is File . 从哪里来的呢呀
//小锅锅不要着急,看下面嘛
var file;
$('input[file]').on('change',function(e){
file = e.target.files[0];
})
姿势二、
//我们也可以直接用一个form来初始化formData,就不用一个个早造了,可以一下就搞定
var formData = new FormData(document.forms[0])
//或者
var formData = document.forms[0].getFormData();
摆好姿势,我们要发射啦
$.ajax({
type : "post", //提交方式
url : 'image',//路径
data: formData,
processData:false, // 告诉jquery不要处理发送的数据
contentType:false, // 告诉jquery不要设置请求头
success : function(data) {
if (data.success == 1 ) {
$.toaster('上传成功',2);
location.href = 'images';
} else {
$.toaster('上传失败',1);
}
}
});
注意:这两个是必须的processData:false, contentType:false,否则jquery会处理我的数据,设置请求头,就会报错了。
原生的也可以,不能有了试管就放弃自然生育啊
原生的来了
const xhr = new XMLHttpRequest();
// 进度监听
xhr.upload.addEventListener('progress', (e)=>{console.log(e.loaded / e.total)}, false);
// 加载监听
// xhr.addEventListener('load', ()=>{console.log("加载中");}, false);
// 错误监听
xhr.addEventListener('error', ()=>{Toast.error("上传失败!", 2000, undefined, false);}, false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
const result = JSON.parse(xhr.responseText);
if (xhr.status === 200) {
// 上传成功
} else {
// 上传失败
}
}
};
xhr.open('POST', '/uploadUrl' , true);
xhr.send(formData);