オリジナルjavascriptアップロードファイルプラグインのパッケージ
9617 ワード
生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です