通过input:file来实现图片预览和上传的功能
input:file
-
accept属性，表示接受的文件类型，默认所有文件类型
Paste_Image.png - mutiple，表示接受同时上传多个文件
-
上传的文件会在input的files对象中拿到，files对象是一个fileList对象
Paste_Image.png -
原生的样式如何修改
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
预览功能的实现
-
使用FileReader
图片会以base64转换成字符串，只适用于比较小的图片，优点是可以伴随html一起下载，不需要额外的请求
Paste_Image.png
Paste_Image.png -
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
