关于文件选择器 input type=file原生样式的优化

直入正题

• 原生样式

<input type="file" class="form-control" id="fileName"  multiple="true" required>
1

效果：

优化

原理：
①新增一个类型为 text 的input 框，主要用来存放显示 选择的文件地址；
②input框右边新增一个按钮 ”选择文件“，用来点击时触发原生input type=file的点击事件；
③隐藏原生input的样式。
④ 关于onChange事件，如果是如下代码：

οnchange=“document.getElementById(‘text-field’).value=this.value”
出来的效果会是这样：

这个路径是浏览器安全策略，所以显示fakepath，我们也可以修改浏览器安全策略，但是很多时候不能指望客户去手动修改。在我这里显示路径没有意义，只是为了显示一下文件名即可。所以下面代码里我做了处理，截取文件名显示即可。

代码：

<div>
    <input type='text' id='text-field' class="form-control" />
    <span class="input-group-btn">
	       <button type='button' class='btn btn-primary language_label'
	                             onclick="document.getElementById('fileName').click()">Select_the_file
	       </button>
    </span>
    <input  type="file" id="fileName" class="file2" style="display: none" onchange="document.getElementById('text-field').value=this.value.substring(this.value.lastIndexOf('\\')+1)" />
</div>
...

<style>
    .file2{
        filter:alpha(opacity:0);
        opacity:0;
        width:0px
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

优化后效果：

感觉还可以~
希望可以帮助到有需要的小伙伴！

---

路虽远，行则将至；事虽难，做则可成。