前言
上传图片是常见的需求，多使用input标签。本文主要介绍 input标签的样式美化 和 实现图片预览。
用到的知识点有：
1、input标签的使用
2、filelist对象 和 file对象
3、fileReader对象
样式美化
原生的input标签样式单一，且在不同浏览器下的表现还不一致。所以为了美观和统一，我们需要自定义input标签的样式。
实现的方式有很多中，这里采用的是：用一个div将input标签包裹，然后再将input标签透明度设置为0，再对div设置自己需要的样式。html和css如下：
// mulitiple属性控制是否允许上传多个文件 点击上传图片
.upload-file{ position: relative; width: 100px; padding: 10px 15px; border: 1px solid rgb(119, 154, 80); border-radius: 5px; background-color: rgb(66, 215, 142); color: #333333; font-size: 14px; text-align: center; overflow: hidden; } .upload-file span{ //单行显示 text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .upload-file:hover{ //简单的hover效果 font-size: 15px; border-color: rgb(39, 226, 81); } .upload-file input[type='file']{ height: 100%; width: 100%; position: absolute; //设置为绝对定位，不会影响到其他元素 top: 0; right: 0; opacity: 0; //透明度为0 filter: alpha(opacity=0); cursor: pointer; } 这样点击div，其实也就点击到了input标签，可已正常触发选择文件的。
效果如下：
但是这样就会产生一个问题，如何获取选择文件的文件名称呢？需要用到file对象的name属性
filelist和file对象--获取文件名
input元素选择文件后会返回FileList对象，比如
//input元素var fileInput = document.querySelector('.input-file');//filelist对象var filelist = fileInput.files //file对象 var file = filelist.item(0)
或者 var file = filelist[0]
我们知道，每个input[type='file']都有一个files属性，返回的就是filelist 就和nodelist类似，不是数组。filelist就是由多个file对象组成的，每个file对象都是一个文件。
filelist对象有个length属性，可以获取长度；还有item(index)方法，可以获取到file对象，当然可以通过 filelist[index]来获取。
file对象常用的属性有：
lastModified ： 返回当前 File 对象所引用文件最后修改时间， 自 1970年1月1日0:00 以来的毫秒数。
lastModifiedDate : 返回当前 File 对象所引用文件最后修改时间的 Date 对象。 name : 文件名。 size : 文件大小。 type ：文件类型。所以我们可以通过file对象的name属性来获取到文件名，在修改到span元素中
var fileInput = document.querySelector('.input-file'); var tip = document.querySelector('.tip'); fileInput.addEventListener('change',function(e){ //监听change事件，选择文件后触发 if(this.files.length === 1){ //处理文件名 tip.textContent = this.files[0].name; }else { tip.textContent = '已选择 ' + this.files.length + ' 个文件'; } }) 效果如下：
现在已经自定义了input[type='file']的样式，而且实现了原有的功能。那么如何实现图片预览呢？
FileReader 对象 --实现图片预览
FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容。也就是说FIlereader对象可以读取到input选择的文件。filereader对象在读取file对象时，当读取完成时，readystate属性的值会变为DONE，会触发load事件。而且有多种读取方式：
readAsBinaryString()读取完成后，result属性中包含原始数据的二进制数据，readAsDataURL()读取完成后，result属性中包含data:url格式的数据，readAsText()读取完成后，result属性中包含字符串格式的数据，readAsArrayBuffer()result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容。
这里上传的时图片，所以使用readAsDataURL()读取。现在html中加入个预览触发按钮，而预览图片存放的区域。
//简单结构//样式 .preview{ margin-top: 10px; width: 150px; } .preview img{ margin: 5px 0; width: 100%; }
实现预览功能，注释中已有详细解释，不再重复。注意一定要等filereader读取完成后，再进行赋值，不然图片的src属性会是空的
var preview = document.querySelector('.preview') var previewBtn = preview.children[0]; previewBtn.addEventListener('click',function(e){ var filelist = fileInput.files; if(filelist.length < 1){ alert("未选择图片，无法预览"); return false; } [].slice.call(filelist).forEach(function(value,index){ //遍历file对象 var fileReader = new FileReader(); //创建一个filereader对象 var img = new Image(); //创建一个图片对象 fileReader.readAsDataURL(value) //读取所上传对的文件 fileReader.onload = function(){ img.src = this.result; //读取完成后，赋值给img对象 preview.appendChild(img) //添加到预览区域 } }) }) 效果如下：
总结
总结来说，就是 input[type='file']的files属性 --> filelist对象 --> file对象 --> filereader对象读取file对象。通过它们的一些参数值实现我们想要的功能。由于只是简单demo，不严谨的地方和丑陋的样式就多多包涵了。
再下一步就是要上传图片到服务器了，会在下个随笔中记录。