原生javascript上传文件插件封装

原生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