从实战中学前端：打造自己的 html5 文件上传插件

文件上传初体验

<!-- 这里用了前边的按钮样式，不是重点 -->
<input type="file" id="logo" name="logo" /><button class="btn btn-bg-green">上传</button>

效果图：

美化上传控件样式

基本思路：文件上传控件属于是不好直接控制样式的控件，这里我们转变一下思路，将控件放在一个可以任意美化的 div 中，然后将此上传控件设为透明，大小刚好为 div 的大小。

<div class="upload">
    <div>选择文件</div>
    <input type="file" id="logo" name="logo" />
</div>
<button class="btn btn-bg-green">上传</button>

.upload{
	width: 80px;
	height: 30px;
	color: white;
	padding: 5px;
	text-align: center;
	border-radius:5px ;
	background: green;
}
.upload>input[type='file']{
	filter:alpha(opacity=0); /*IE滤镜*/
	-moz-opacity:0; /*Firefox私有*/
	opacity:0;/*其他*/
	height: 30px;
	width: 80px;
	/*background: black;*/
	position: relative;
	left: -6px;
	top: -23px;
}

效果：

利用 jquery ajax 实现异步上传插件

jquery 是一个常用的 js 插件，封装了 js 的原生 api，使 js 操作大大简化，如 js 原生要获得上述 file 控件，需要 document.getElementById ("logo"); 而通过 jquery 这样就能：$("#logo") 达到目的。

注：这里不需要去完全理解 jquery，知道就行。

ajax 全称异步 JavaScript 和 XML，通俗点作用就是不需要更新整个页面，只需更新需要的部分，如浏览新闻网站时跳页，只需更新新闻列表即可，而诸如导航、热点新闻都不需要更新，暂且这么理解就行了，想深入理解的，度娘即可。

从 jquery 官网或其他渠道下载 jquery 文件，引入到项目中。

插件代码如下：

;
!
(function() {
	$Y = {
		upload: function(p) {
			var fileObj = document.getElementById(p.id).files[0];
			if(!fileObj)
				return false;
			if(p.before)
				p.before(document.getElementById(p.id));
			if(p.size < fileObj.length) {
				p.error("文件大小超过限定");
				return false;
			}
			if(p.type.indexOf('jpg') == -1) {
				p.error("文件格式不符合要求");
				return false;
			}
			var formData = new FormData();
			formData.append('file', fileObj);
			$.post(p.url, formData, function(res) {
				p.success(res);
			});
		}
	}
})();

调用方法：

$("button").click(function() {
	$Y.upload({
		id: 'logo',
		url:'',
		type: 'jpg|png|gif',
		size: 2,
		before: function(input) {
			//文件上传前，如实现图片预览
			//input是当前file控件
			//此回调不是必须的
		},
		success: function(res) {
			//res是服务端定义的任何格式，建议为json格式
			//只要经过了服务器端就好执行此回调
		},
		error: function(res) {
			//res是出错的提示文本
			alert(res);
		}
	});
});

相关说明： $.post (url,data,function) 是 jquery ajax 的 post 提交方式，其中 url 是服务端地址，data 为参数形如：{id:1,name:"Tom"}，function 是异步执行完后的回调函数。

上传插件 $Y.upload 参数说明： id：上传控件的 id、type：可以上传的文件格式、size：文件大小限制，单位为 kb、before：文件上传前的回调、success：文件异步上传到服务端的回调，无论是否成功上传，只要经过了服务端即会调用、error 是文件在上传前验证过程中发现问题的回调，如格式不对，大小超过限制等。

FormData 是 XMLHttpRequest Level 2 添加了一个新的接口 ——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send () 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。

新的 html5 file api 可以实现图片预览及其他非常有用的操作，这里给一个图片预览函数：

function showPreview(obj) {
	var file = document.getElementById("logo").files[0];
	var reader = new FileReader();
	// 将文件以Data URL形式进行读入页面
	reader.readAsDataURL(file);
	reader.onload = function(e) {
		obj.innerHTML = '<img src="' + this.result + '" alt=""/>';
	}
}

到目前为止实现了一个基本的文件上传插件，还有比如图片预览、文件格式限制、多文件上传、文件进度等都没有去实现，这里仅仅是抛砖引玉，各位可以自己去实现，这样子才能快速提高技术。

PS：没有提供后端实现，在后端只需要根据以往的方式获取再上传即可。