如何从 type=file 输入中删除“未选择文件”？答案

【问题标题】：How to remove "no file selected" from type=file inputs?如何从 type=file 输入中删除“未选择文件”？
【发布时间】：2011-08-31 14:21:39
【问题描述】：

我似乎想不出任何方法来删除“文件”类型输入旁边显示的“未选择文件”文本。

你们知道如何删除这段文字吗？

【问题讨论】：

将其添加到输入中似乎在 webkit 中有效.... style="width: 80px; height: 25px; overflow: hidden;"
可能重复：stackoverflow.com/questions/1084925/…

标签： javascript html

【解决方案1】：

input[type='file'] {
  color: transparent;
}

享受

【讨论】：

鼠标悬停或光标更改仍然存在。

【解决方案2】：

没有跨浏览器的方法可以做到这一点。 “未选择文件”文本位于小部件的实现定义部分中，我不相信大多数浏览器都提供了太多特定于浏览器的自定义方式。另一方面，当 value 属性为空时，您可以简单地使用 CSS 来覆盖文本。

【讨论】：

【解决方案3】：

您可以通过定义输入的宽度并隐藏超出的内容（不需要的“未选择文件”文本）来做到这一点。

input {
    width: 132px;
    overflow:hidden;
}

Here is the demonstration on jsfiddle.

注意：每种语言都有自己的默认文本，并且可能呈现不同的输入大小。 In brazilian portuguese 132px 的宽度就好了！

我的回答是基于this similar question on stackoverflow。

【讨论】：

【解决方案4】：

您可以将文件字段替换为带有此问题答案的按钮：file upload button without input field?

【讨论】：

【解决方案5】：

CSS
<style>
#image_file{
   position: relative;
   width: 188px;
   border: 1px solid #BBB;
   margin: 1px;
   cursor: pointer;
   float: left;
  }
</style>

HTML
<input id="image_file" onclick="getFile()" onfocus="this.blur()" value=""/>
<div style='height: 0px;width: 0px; overflow:hidden;'>
    <input type="file" id="PinSpot_file">
</div>
<input type="button" onclick="getFile()" style="background-color: #DDD;" value="Browser" >


JAVASCRIPT
function getFile(){
   document.getElementById("PinSpot_file").click();
 }

// Event when change fields
$('#PinSpot_file').live('change', function(e) {     
  var file = this.value;
  var fileName = file.split("\\");
  document.getElementById("image_file").value = fileName[fileName.length-1];

   //AJAX
}

【讨论】：

【解决方案6】：

这是一个非常好的 hack，而且更干净。

HTML

<div id="file_info' style='display:inline;'>Browse</div>
<input type="file" name='file[]' multiple style='opacity: 0;' onchange='displayFileName()'/>

JS

function displayFileName() {
    var files = $('input[type="file"]')[0].files;
    document.getElementById('file_info').innerHTML = files.length + " images to upload";`
}

【讨论】：

【解决方案7】：

好吧，由于没有办法完全禁用文本，我建议要么在文本上放置一个元素，要么尝试以下解决方案..

CSS

input[type="file"] {
width: 90px; /* Keep it under 100px in order to hide the unwanted text. */
}

并为元素添加一个 html inline-title 属性以隐藏“未选择文件”悬停文本。

HTML

<input type="file" id="FileId" title="">

或者，您可以使用 JavaScript 完成所有操作。

JS

document.addEventListener('DOMContentLoad', myFunction);

function myFunction() {
const FilePicker = document.getElementById('FileId');
FilePicker.style.width = "90px";
FilePicker.title = ""; // Leave This Empty
}

【讨论】：

【解决方案8】：

你可以试试这个。它适用于我的火狐浏览器

<style type="">
    input[type='file'] {
       color: transparent;
    }
</style>

【讨论】：