前端预览input上传的图片

在开发的时候，有需要前端预览上传的图片的需求，在完成这个需求后来总结一下

首先我们需要先了解input 和 file类型

Input 标签的file类型，提供了上传文件的功能，通过此类型，可以上传文件到服务器。

input的file类型，在上传文件时，会返回一个File对象，这个对象会存在一个FileList数组里边。之所以存在数组里边，主要是方便实现多文件上传。File对象继承自Blob对象，也就是说Blob对象的属性和方法，File对象也可以使用，而File对象本身也有自己的属性和方法。

下图是浏览器打印出来的FileList ： 

各项代表的意思分别是：

• lastModified属性，返回File对象引用文件最后的修改时间。
• lastModifiedDate属性，引用文件最后修改时间的Date对象。
• name属性，所引用文件的名字。
• size属性，返回文件大小。
• webkitRelativePath属性，相关的Path或URL。
• type属性，返回文件的多用途互联网邮件扩展类型（MIME类型）。
• getAsBinary() 将文件内容按照原始二进制形式解析成字符串并返回.

 

前端显示上传图片有两种方法：

上传照片前                                                                上传照片后

 HTML： 

<div id="containner">       
        <input type="file"  id="imgFile" onchange="previewFile()"