直入正题
- 原生样式
<input type="file" class="form-control" id="fileName" multiple="true" required>
效果：
优化
原理：
①新增一个类型为 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>
优化后效果：
感觉还可以~
希望可以帮助到有需要的小伙伴！
路虽远，行则将至；事虽难，做则可成。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/157225.html
