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

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

文件上传初体验

上传

效果图：

美化上传控件样式

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

选择文件

上传

.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 = '';

}

}

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

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