js文件上传

介绍两种方式进行文件上传：

1、html5 ajax上传

它需要file控件以及XMLHttpRequest请求。下面是使用原生JS封装的一个上传插件：

function fileUpload(options){
	var opts = options || {};
	var func = function(){};
	this.fileInput = opts.fileInput || null;
	this.url = opts.url || '';
	this.fileList = [];
	this.onFilter = opts.onFilter || function(f) {return f;} //选择文件组的过滤方法
	this.onSelect = opts.onSelect || func;  //文件选择后
	this.onProgress = opts.onProgress || func;  //文件上传进度
	this.onSuccess = opts.onFailure || func;  //文件上传失败时
	this.onComplete = opts.onComplete || func;  //文件全部上传完毕时
	this.init();
}
fileUpload.prototype = {
	dealFiles: function(e){
		//获取要上传的文件数组（用户选择文件后执行）
		var files = e.target.files || e.dataTransfer.files;
		this.fileList = this.onFilter(files);
		for(var i = 0, file; file=this.fileList[i]; i++){
			//增加唯一索引值
			file.index = i;
		}
		this.onSelect(this.fileList);

		return this;
	},
	removeFile: function(fileDelete){
		//删除某一个文件
		var arrFile = [];
		for(var i = 0,file; file=this.fileList[i]; i++){
			if(file != fileDelete){
				arrFile.push(file);
			}
		}
		this.fileList = arrFile;

		return this;
	},
	removeAll: function(){
		//清空文件队列
		this.fileList = [];
		return this;
	},
	uploadFile: function(){
		//上传文件
		var me = this;
		for(var i = 0, file; file = this.fileList[i]; i++){
			(function(file){
				var formData = new FormData();
				var xhr = new XMLHttpRequest();

				if(xhr.upload){
					xhr.upload.addEventListener("progress", function(e){
						//上传中
						me.onProgress(file, e.loaded, e.total);
					}, false);
					xhr.onreadystatechange = function(e){
						//文件上传成功是失败
						if(xhr.readyState == 4){
							if (xhr.status == 200) {
								me.onSuccess(file, xhr.responseText);
								me.removeFile(file);

								if(!me.fileList.length){
									me.onComplete(); //上传全部完毕。执行回调
								}
							}
							else{
								me.onFailure(file, xhr.responseText);
							}
						}
					};

					//开始上传
					formData.append('file', file);
					xhr.open("POST",  me.url, true);
					xhr.send(formData);
				}
			})(file);
		}
	},
	init: function(){
		var me = this;

		//文件选择控件选择
		if(me.fileInput){
			me.fileInput.addEventListener("change", function(e){
				me.dealFiles(e);
			}, false);
		}
	}
};

注意：FormData IE9以下的浏览器不支持。此外，因为使用了ajax的上传方式，所以不能跨域。如果要支持低版本的ie或者跨域时，建议使用第二种方法，借助form和iframe来实现上传

2、form表单提交到iframe

<iframe name="demoIframe" style="display:none"></iframe>
<form action="upload.php" target="demeIframe" method="post" enctype="multipart/form-data">
	<input type="file" class="filename" name="fileLabel">
	<input type="submit" value="提交">
</form>

我们点击提交，可以看到下面的请求：

已经把文件上传。那么，加入这个upload.php接口可用，而且假如上传成功后，会返回：

{
	"code":  "200",
	"success": true,
	"data": {
		...
	}
}

我们要怎么去获取返回值，从而进行下一步的操作呢？因为我们是上传到了iframe中，所以我们只需要监听iframe的load事件，如果有返回值了，我们就能获取到，从而进行进一步处理。看js代码：

$('iframe').on('load', function(){
	var responseText = $('iframe')[0].contentDocument.body.textContent;
	var responseData = JSON.parse(responseText) || {};

	if(responseData.isSuccess == true || responseData.code == 200){
		//success
	}
	else{
		//error
	}
});

总结：

以上两种方法就可以上实现所有场景下的文件上传需求了。第一种方法便于理解，代码简单，便于理解，但是IE9及以上才支持；第二种方法是很原始的方法，支持所有浏览器，但是代码稍显复杂。

转载《两种文件上传的实现-Ajax上传和form+iframe》