关于input type = "file" 样式的美化

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/llz199607/article/details/82735221

首先，<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的点击事件，弹出文件选择的对话框。