我不想看到“没有select文件”的文件input字段

有什么办法可以停止“ no file chosen ”inputtypes的文件。

 <input type="file" id="field-id" name="html" /> 

Answer 1

你不能完全摆脱“没有select的文件”，但你可以通过设置标题将文本更改为有意义的内容。

 <input type="file" title="foo"> 

将在鼠标hover上显示“foo”而不是“不select文件”

不幸，

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

不像你可能希望的那样工作。

Answer 2

最简单（据我所知，可靠）黑客我发现是设置初始字体颜色为透明，以隐藏“没有文件select”的文本，然后更改字体颜色变为可见的东西。

瞧：

 <input type="file" style="color:transparent;" onchange="this.style.color = 'black';"/> 

Answer 3

对于Chrome浏览器，您可以使用这种技巧：

 <input type="file" id="myFile" name="html" style="width: 90px;" onchange="this.style.width = '100%';" /> 

含义设置固定宽度，只显示button，然后更改后将其更改为100％，以显示文件名。

Answer 4

 <style type="text/css"> #inputcontainer { background:url("http://phpfileuploader.comhttp://img.dovov.comupload.png") no-repeat; height:50px; width:250px; } input[type="file"]{ opacity:0; height:48px; width:48px; } </style> <div id="inputcontainer"> <input type="file" onchange="document.getElementById('file-path').value = this.value.split('\\')[this.value.split('\\').length-1];"/> <input type="text" id="file-path"/> </div> 

Answer 5

不，你需要创build一个自定义控件 。

Answer 6

似乎荒谬的，但对我来说是足够的：

 input[type='file'] { width: 95px; } 

在Chrome 20，Safari 5.1.7和IE 9上testing。

注意：在IE9中有点奇怪，因为留下了一个迷你的input_text区域。

Answer 7

在mouseover事件中尝试下面的代码

 jQuery('input').attr('title', ''); 

Answer 8

即使这是一个旧的post，我认为这个答案将有助于某人想要做类似的事情。 我想要一个button来从移动设备的相机插入图像，但我不想丑陋的button“[select文件]没有select的文件…”垃圾。

我想要一个button：

• 我可以自定义例如有一个图像button
• 用户会点击它，并会要求他们input文件
• 使用input和张贴到服务器

我做了什么

1. 创build一个button元素

   • 用onclick="someFunction()"和一些id="some_id"
   • 一个带有src="someimage"的img标签 – 显示图片而不是文本

2. 创build一个input元素

   • type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"

3. JavaScript的

   • 当我点击这个button时，它会触发clickHiddenInput()函数来执行你select的元素的click事件

      function clickHiddenInput() { document.getElementById("hidden_input").click(); } document.getElementById("hidden_input").addEventListener('change', readFile, false); function readFile(evt) { if (!(evt.target.files.length < 1)) { var data = new FormData(); var files = evt.target.files; var file = files[0]; data.append("hidden_input", file); // do some stuff with the file } } 

Answer 9

尝试这个：

 <input type="file" title=" "/> 

注意空白 – 这很重要，因为title =“”不起作用。

Answer 10

我尝试使用宽度设置，但它不能在Firefox中工作。 如果您拥有稳定一致的背景，则可以将颜色设置为与背景相同。 我有一个白色的背景，所以我只是：

 input.remove-no-file-chosen { width: 90px; color: #fff; } 

Answer 11

 input[type=file]{ opacity:0; } 

那么你可以devise你的箱子，无论你想要的风格。 如果你点击div，它将打开文件浏览器窗口。