input type=file 实现上传、预览、删除等功能

转载地址：http://blog.csdn.net/qingyjl/article/details/52003567 不知何时，突然对上传文件按钮起了浓厚的兴趣，当然这源于工作的需要。当时为了顺利上线，索性直接引用了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的格式，也就是可以当成图片的srcresult 属性 //将读取的数据保存在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对象。