学习笔记——input:file的美化与文件上传

实例

<input id="upload-btn" type="file" accept="image/png, image/gif" name="file" />

accept属性详解

accept属性主要用于限制文件类型，只有accept属性中声明的文件类型可以被发现。下表中列出了常用的MIME类型（也可以直接在accept属性中申明文件后缀名，如：accept=”.xls, .xlsx”）：

后缀名 MIME名称 *.3gpp audio/3gpp, video/3gpp *.ac3 audio/ac3 *.asf allpication/vnd.ms-asf *.au audio/basic *.css text/css *.csv text/csv *.doc application/msword *.dot application/msword *.dtd application/xml-dtd *.dwg image/vnd.dwg *.dxf image/vnd.dxf *.gif image/gif *.htm text/html *.html text/html *.jp2 image/jp2 *.jpe image/jpeg *.jpeg image/jpeg *.jpg image/jpeg *.js text/javascript, application/javascript *.json application/json *.mp2 audio/mpeg, video/mpeg *.mp3 audio/mpeg *.mp4 audio/mp4, video/mp4 *.mpeg video/mpeg *.mpg video/mpeg *.mpp application/vnd.ms-project *.ogg application/ogg, audio/ogg *.pdf application/pdf *.png image/png *.pot application/vnd.ms-powerpoint *.pps application/vnd.ms-powerpoint *.ppt application/vnd.ms-powerpoint *.rtf application/rtf, text/rtf *.svf image/vnd.svf *.tif image/tiff *.tiff image/tiff *.txt text/plain *.wdb application/vnd.ms-works *.wps application/vnd.ms-works *.xhtml application/xhtml+xml *.xlc application/vnd.ms-excel *.xlm application/vnd.ms-excel *.xls application/vnd.ms-excel *.xlt application/vnd.ms-excel *.xlw application/vnd.ms-excel *.xml text/xml, application/xml *.zip aplication/zip *.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

---

美化

原生的input样式显然不能满足我们的要求。那怎样才能自定义按钮样式呢？笔者采用的方法是将input标签包裹在a标签内部，并把input标签的opacity设置为0，通过修改a标签的style来自定义按钮。

css:

#upload-container {    position: relative;    // 添加自定义样式    // TODO}#upload {    position: absolute;    width: 100%;    height: 100%;    top: 0;    left: 0;    opacity: 0;}

html:

<a id="upload-container" href="javascript:void(0);">上传    <input id="upload" type="file" accept="image/png, image/gif" name="file" /></a>

---

事件

onchange

onchange触发事件必须满足两个条件：
a）当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）。
b）当前对象失去焦点(onblur)。

onpropertychange

只要当前对象属性发生改变，都会触发事件，但是它是IE专属的。

oninput

oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件，它只在对象value值发生改变时奏效。

总结：经笔者实践
对于chrome来说，onchange可以在文件路径发生改变时触发；
对于opera、firefox等，onchange、oninput可以在选择文件时触发；
对于ie，onpropertychange可以在选择文件时触发；

---

读取文件

由于新版浏览器出于安全原因并不支持通过input的value属性直接获取文件绝对路径，所以笔者采用以下方法：

document.getElementById("upload").onchange = function(event) {    var FileReader = window.FileReader;    var reader = new FileReader();    reader.onload = function(e) {        let data = e.target.result;        console.log(data)    };    var file = event.target.files[0];    reader.readAsDataURL(file);}

• onload实现异步加载，将数据加载完毕后，在onload事件中，通过result属性即可获得文件内容。
• 详细FileReader的API可参见FileReader。

---

尾语

不当之处，敬请斧正，与君共勉。