原生javascript上传文件插件简易封装
封装函数的代码:
function uploadFile(options) {
//如果调用的时候没有传上传的路径,就抛出异常url为空
if(!options.url){
throw new Error('url is empty')
}
//创建XMLHttpRequest对象
var client = new XMLHttpRequest();
//判断在调用的时候有没有传入这两个函数参数,防止报错
var success = options.success || function() {};
var error = options.error || function() {};
//设置公用的方法,不管上传成功还是失败都会执行的函数
var complete = options.complete || function() {};
client.open('post', options.url, true);
client.setRequestHeader("X-Requested-With", "XMLHttpRequest");
client.withCredentials = false;
client.send(options.data);
client.onreadystatechange = function() {
if(this.readyState !== 4) {
return;
}
if(this.status === 200 || this.status === 201) {
var data = JSON.parse(this.responseText);
//如果成功,就调用成功函数
success(data);
} else {
var data = JSON.parse(this.responseText);
error(data);
}
complete();
};
return client;
};
函数调用的时候:
var imgFile = document.getElementById('uploadFile');
var fd = new FormData();
fd.append('file',imgFile.files[0]);
api({
url: '',
data: '',
success:function() {
},
error:function() {
},
complete:function() {
}
})
1.调用时和jQuery的ajax在调时是一样的写法,不过里面判断的东西还很少,很不严谨。
2.也支持多文件上传,需要在标签上设置multiple属性,并且都放进formData对象中。此例中是fd