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

写在前面的废话：文件上传在web开发当中很是广泛，好比新闻图片、用户头像、商品图片等等，在html5几乎占据统治地位（可是依然有部分顽固派人士）的状况下，基于html5的文件上传也占了多数（在html5以前为了更加美观啥的好多都会借助flash），如今也有比较多的开源插件可用，如百度的webuploader，这里咱们来本身实现一个简易的文件上传插件，高手请绕道。

文件上传初体验

<!-- 这里用了前边的按钮样式，不是重点 -->
<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：没有提供后端实现，在后端只须要根据以往的方式获取再上传便可。