学习笔记——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。

---

尾语

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