Question

有什么方法可以阻止“no file chosen”输入类型文件。

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

Answer 1

你无法完全摆脱'没有选择的文件'，但你可以通过设置标题将文本更改为有意义的内容。

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

将在鼠标悬停时显示“foo”而不是“未选择文件”

不幸的是，

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

不像你希望的那样工作。

Answer 2

最简单（据我所知，可靠）hack我发现将初始字体颜色设置为透明以隐藏“无文件选择”文本，然后将字体颜色更改为更改时可见的内容。 / p>

VOILÀ：

<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%';" />

含义设置固定宽度，仅显示按钮，然后在更改后将其更改回100％，以便显示文件名。

Answer 4

<style type="text/css">
#inputcontainer {
    background:url("http://phpfileuploader.com/images/upload.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

不，你需要create a custom control。

Answer 6

对于轻松而言似乎很荒谬，但对我来说已经足够了：

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

在Chrome 20，Safari 5.1.7和IE 9上进行了测试。

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

Answer 7

在mouseover事件

中尝试以下代码

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

Answer 8

即使这是一篇旧帖子，我认为这个答案对于希望做类似事情的人有所帮助。我想要一个按钮从移动设备的相机插入图像，但我不想要丑陋的按钮“[选择文件]没有选择文件......”垃圾。

我想要一个按钮：

我可以自定义，例如有一个图像按钮
用户会点击它，它会要求他们输入一些文件
使用输入并发布到服务器

我做了什么

创建一个按钮元素
- 有onclick="someFunction()"和一些id="some_id"
- img标记src="someimage" - 显示图片而非某些文字
创建一个输入元素
- 与type="file" style"display: none" accept="image/*" capture="camera" id="hidden_input"

的JavaScript

当我点击该按钮时，它将触发clickHiddenInput()函数，该函数将执行您选择的元素的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;
}

然后你可以设计你想要的任何风格的盒子。如果单击div，它将打开文件资源管理器窗口。

我不想在文件输入字段中看到“没有选择文件”

11 个答案: