不知何时，突然对上传文件按钮起了浓厚的兴趣，当然这源于工作的需要。当时为了顺利上线，索性直接引用了jQuery的一个上传组件，简单粗暴。
后来闲下来，就对这个进行了一番研究，然后做了一个简单的Demo。友情提醒：不要上传过大的文件，不然换谁都受不了，目前不支持坑爹的低版本IE
戳我看看
虽然有点丑，但是基本功能实现了就好
其实要实现这个功能挺简单的，因为有现成的API可以参考，不会了还可以去搜一下别人做的，接下来我就说一下我对这个的研究和理解，如有错误，欢迎指正！美化input type=file
当然原生的input可不是长的这个样子，这里我们其实是把input的透明度设置为0，然后用span标签来显示上传文件字样，然后把它们重叠到一块就行了。file对象
File对象
这里我们获取到这个File对象之后就可以获取到上传文件的一些属性，比如：lastModified（代表文件的修改日期，而非上传日期）、name、size（单位是b）、type（例如图片就是"image/png"，然后我们可以根据image来判断是否是图片）等。var file = e.target.files[0];//获取File对象，这里是上传单张图片，[0]代表第一张图片。如果多张，就是一个var file = e.target.files;
var type = file.type.split('/')[0];//按照惯例，不应该由前端判断格式，因为这里是根据后缀名判断的，修改后缀名仍旧可以上传，理应由后端根据文件格式来判断。
if (type !='image') {
alert('请上传图片');
return;
}
var size = Math.round(file.size / 1024 / 1024);
if (size > 3) {
alert('图片大小不得超过3M');
return;
};fileReader对象
接着讲FileReader对象，这个比较复杂，可以考虑看下。mozilla开发者文档介绍，英文，勉强可以看一下。
不过归纳起来，我们依旧只需掌握几个重要的点，- readAsDataURL() 方法。//将文件读取为base64的格式，也就是可以当成图片的src
- result 属性 //将读取的数据保存在result里。
- progress 事件 //定时触发，来获取当前已上传文件的大小，如进度条
- loade 事件 //文件上传完成时触发
- loadend 事件 //文件上传完成时（不管成功、失败）触发
其他的诸如：readAsBinaryString()方法，loadstart事件等，知道是什么意思就行了。可以参考（由于是三年前写的，有些不全，还是要以官方文档为准）。前人栽的树
var reader = new FileReader(); //新建FileReader对象
reader.readAsDataURL(file); //读取为base64
//以下代码可以删除
reader.onloadstart = function(){
console.log('start'); //开始读取
};
reader.onprogress = function(e){
//这个是定时触发的事件，文件较大的时候较明显
var p = '已完成：' + Math.round(e.loaded / e.total * 100) + '%' ;
$(".file_upload").find(".progress").html(p);
console.log('uploading'); //文件较大，就会出现多个uploading
};
reader.onabort = function(){
console.log('abort'); //用作取消上传功能
};
reader.onerror = function(){
console.log('error'); //文件读取出错的时候触发，暂模拟不出
};
reader.onload = function(){
console.log('load complete'); //完成
};
//预览代码，没在onload里面写的原因是我不想
reader.onloadend = function (e) {
var dataURL = reader.result，
image = '<img src="'+dataURL+'"/>'， //预览图片
text = '<span>"'+dataURL+'"</span>'; //测试预览text
var name = file.name,size = Math.round(file.size / 1024);
var div = '<p>Name: '+name+'</p><p>Size: '+size+'kb</p>';
var imglist = '<div class="img_box"><span class="delete">X</span>'+image + div+'</div>';
$(".img_holder").html(imglist);
};如果一切还算顺利，那就要注意一下，删除预览图片可能存在某些问题，删除不仅仅要删除页面上展示的图片，input里面的图片也要清空，不然就会出问题。PS：上传多张图片，原理差不多，不过需要注意几点：
- 设置multiple来实现多张上传功能。
- 需要使用循环来获取上传的每一张图片，并把他们依次展示出来
- 每次循环都需要重新new一个新的FileReader对象。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
