input type=file 如何达到去除输入框效果

input type=file 如何达到去除输入框效果

<input  type=“file”>输入框中做到去除输入框效果

在我平时修改页面的时候，由于需要用到上传文件这一功能的时候，需要用到 <input type="file">，但是效果却不尽人意。如下图：

       

此时显示的按钮部分（选择文件）与文字部分（未选择任何文件）当你点击时都能够弹出上传文件的选择框进行选择，但这放在页面中显示是不尽人意的。最理想的效果就是能够去除文字部分，只留下按钮部分。

 

下面是我想到的如何解决这一问题的方法：

由于<input type="file">自带默认的样式，无法去简单的修改。那么，我想到的是用一个自己创建的按钮去替代这一部分，因为需要的只是点击‘选择文件’按钮后出现选择框这一功能。那么，利用点击新建的按钮（这个按钮的样式能够用css去修改样式）时触发点击事件，用新建按钮的点击事件来触发<input type="file">

接下来是代码演示：

                 

<input type='text' id='textfield' class='txt' />
<input type='button' class='btn' value='浏览...'οnclick="document.getElementById('fileField').click()" />
<input  type="file" id="fileField"class="file" size="28" οnchange="document.getElementById('textfield').value=this.value" />

这里有三个input，第一个是用来显示上传路径的输入框（如果不需要可省去，那么左侧的输入框就会消失），第二个就是用来显示的浏览按钮，第三个是真正用来弹出选择框的按钮，但在页面中不显示。

点击后出现：

此处只显示第三个input的css样式，前两个可以在页面中显示的可以自行修改：

.file{  filter:alpha(opacity:0);opacity: 0;width:0px }

这里将opacity和width设置为0，这样在页面中无法看见，另外也无法被点击到。

可以看到我用第二个按钮的onclick事件来触发了第三个的点击事件，就能达到相同的效果

这里分享的是我平常遇到的小问题，希望能够帮助到您0v0!