オリジナル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です