无论如何要从type = file输入中删除“未选择文件”？

如何解决无论如何要从type = file输入中删除“未选择文件”？

| 无论如何，我似乎都无法找出要删除的输入旁边显示的“未选择文件”文本，其类型为“文件”。你们知道吗？

解决方法

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

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

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

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

这是jsfiddle上的演示。当心：每种语言都有其自己的默认文本，并且可能呈现不同的输入大小。在巴西葡萄牙语中，132px的宽度就可以了！我的答案是基于关于stackoverflow的类似问题。 ,您可以使用带有以下问题答案的按钮替换文件字段：没有输入字段的文件上传按钮？ ,

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
}

,这是一个非常不错的技巧，而且更干净。的HTML

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

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