通过input:file来实现图片预览和上传的功能

input:file

1. accept属性，表示接受的文件类型，默认所有文件类型

   
   
   Paste_Image.png
2. mutiple，表示接受同时上传多个文件

3. 上传的文件会在input的files对象中拿到，files对象是一个fileList对象

   
   
   Paste_Image.png

4. 原生的样式如何修改

   
   
   Paste_Image.png
   
   

   原生的比较简单，不符合UI的需求，基本思路是把input透明，使用label可以实现自定义上传按钮

<label class="ui_button ui_button_primary" for="xFile">上传文件</label>
<form><input type="file" id="xFile" style="position:absolute;clip:rect(0 0 0 0);"></form>

Paste_Image.png

预览功能的实现

1. 使用FileReader
   图片会以base64转换成字符串，只适用于比较小的图片，优点是可以伴随html一起下载，不需要额外的请求

   
   
   Paste_Image.png
   
   
   Paste_Image.png

2. createObjectURL
   createObjectURL是window.URL对象上的方法，与FileReader相比效率更高

   
   
   Paste_Image.png
   
   

   使用方法：

   
   
   Paste_Image.png
   
   返回的是Blob对象创建的URL字符串，无论是Blob对象创建的URL字符串，还是base64编码的字符串，都可以像普通的url一样使用，可以直接放在img标签的src中或者background的url()中
   
   Paste_Image.png

上传功能的实现

上传利用的是XMLHttpRequest Level 2提供的接口 FormData，这个接口能实现二进制文件的上传，简单来说就是一个ajax请求，内容是FormData

Paste_Image.png

参考

HTML5实现图片预览
玩转图片base64编码
HTML input type=file文件选择表单元素二三事