前端经验:美化input file的方法

这里整理出通用的方案

首先，准备input[file],并设置为不可见
然后准备一个美化后的dom元素替代input[file]的位置
之后绑定事件
给美化的dom元素绑定click事件，用于触发input[file]的click事件
给input[file]绑定onchange事件，用于取得选取文件的路径或File对象

例如:

<div class="fileview float-left margin-right-sm"  onmousedown="document.getElementById('upload').click()" >    <span class="filename" id="filename"></span>    <span class="icon icon-folder-open"></span>    <input type="file" id="upload" onchange="document.getElementById('filename').textContent = this.value; " /></div>