input(type="file")中“未选择任何文件”去除，以及样式整改

一般我们上传文件的按钮 代码，效果 如下：

jsp:

效果：

但是为了美观或者开发需求，一般需要去掉自带的"未选择任何文件",所以可以采用一下方法进行改进：

思路：
1.< input class=“excel_file” type=“file” accept=".xlsx,.xls;"> 用file表示
2. < input type=“button” id=“btn” value=“选择文件”> 用buttom表示
在file原有的的基础上加上 id=“fileinp” ,然后用样式opacity: 0把他整个隐藏起来，在file上面，再输入一个作为我们需要看到的显示的buttom,最后用label包起来，把label的样式设置为relative，看到是buttom，但实际我们点击的是file。
（验证：因为我们buttom的样式写了一个 cursor: pointer;的样式，鼠标放上去指针会改变，但是这里不会改变，说明我们点到的是file，而不是buttom）
补充： label 与 label for的区别

jsp（通过 label 标签绑定 input 标签，然后隐藏 input ，添加 button 和 span 来自定义提示语：）:

 <label for="fileinp">
      <input type="button" id="btn"  value="选择文件"><span id="text"></span>
      <input class="excel_file" type="file" accept=".xlsx,.xls;" id="fileinp">
 </label>

css:

#fileinp{
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#btn{
    cursor: pointer;
    padding: 5px 10px;
    background: #FFF;
    color: #eea931;
    border: solid 1px #eea931;
    border-radius: 5px;
    height: 31px;
    width: 81px;
}

效果：

如果希望鼠标放上去不提示"未选择任何文件",可以设置title=""，如下:

 <label for="fileinp">
      <input type="button" id="btn"  value="选择文件"><span id="text"></span>
      <input class="excle_file" type="file" title="" accept=".xlsx,.xls;" id="fileinp">
</label>

如果要选择文件后 提示语也跟着改变（效果如下）：

input 发生变化时，span 的内容修改为 input 的 value 值，代码如下：

js:

$("#fileinp").change(function () {
    $("#text").html($("#fileinp").val());
})

来源：CSDN

作者：21-夜一

链接：https://blog.csdn.net/weixin_42691149/article/details/104310872