首先,<input type = "file">的默认样式是这样的:
默认の样式
默认的样式直接放到网页中总觉得不太协调,于是我在网上查找它的美化方法。大方向上基本是用CSS美化,但细化到具体的美化方式则多种多样。在眼花缭乱之下找到了这篇文章:修改 input type=file 的样式的最简单方法
什么?最简单方法?我来看一看你有多简单。
以下是作者的思路:
1、重写一个新的样式 ;
2、将默认的样式设为display:none
,即设为不可见 ;
3、在js里调用:当点击新样式的时候,调用这个input
的点击事件。
实现方式:
这里我和该文作者一样,使用css+js(jquery)的方式美化。
HTML部分 使用一个div,把一个<button>和<input type = "file">包裹起来:
<div id="button">
<button id="upload">上传图片</button>
<input type="file" id="fileul">
</div>
css部分:
#fileul{
display: none;
}
js部分 这里我同样使用了jquery:
$(document).ready(function(){
$('#upload').click(function(){
$('#fileul').click()
});
});
最终效果:
最终效果呈现为一个按钮,点击后触发对input的点击事件,弹出文件选择的对话框。
![](https://img-blog.csdn.net/20180917122144365?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xsejE5OTYwNw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)