无论如何从type = file输入中删除“no file selected”？

Question

无论如何，我似乎无法弄清楚使用type =“file”删除输入旁边显示的“No file selected”文本。

你们知道吗？

Answer 1

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

享受

Answer 2

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

Answer 3

您可以通过为输入定义宽度并隐藏超出内容（不需要的“无文件选择”文本）来执行此操作。

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

Here is the demonstration on jsfiddle

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

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

Answer 4

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

Answer 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
}

Answer 6

好吧，由于无法完全禁用文本，因此建议您在文本上放置一个元素或尝试以下解决方案。

CSS

const jsonSignal = [{symbol:'JMIA', price:37.0497, volume:1.317713E7}]; 
console.log(jsonSignal[0].symbol); // 'JMIA'

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

HTML

function CurrentPrice() {
  const url = 'https://financialmodelingprep.com/api/v3/quote-short/JMIA?apikey=API_KEY';
  const response = UrlFetchApp.fetch(url);
  
  // Convert HTTPResponse
  // Use the first element in the response array
  const signal = JSON.parse(response)[0];
  
  console.log(signal.symbol); // 'JMIA'
  console.log(signal.price); // 37.0497
  console.log(signal.volume); // 1.317713E7
}

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

JS

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

Answer 7

这是一个非常好的黑客，它更清洁。

<强> 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";`
}

Answer 8

你可以试试这个

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