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

I don't want to see 'no file chosen' for a file input field

提问by sachin k

Is there any way where i can stop "no file chosen" for input type file.

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

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

回答by Erich Douglass

You can't get rid of the 'no file chosen' entirely, but you can change the text to something that makes sense by setting the title.

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

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

will display "foo" on mouseover instead of "no file chosen"

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

unfortunately,

很遗憾，

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

doesn't work like you might hope.

不像你希望的那样工作。

回答by Will Jenkins

Simplest (and reliable as far as I know) hack I've found is to set the initial font color to transparent to hide the "no file chosen" text, and then change the font color to something visible on change.

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

Voilá:

瞧：

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

回答by Shadow Wizard is Ear For You

For Chrome browsers you can use such trick:

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

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

Meaning setting fixed width that will show only the button then after change change it back to 100% so the file name is displayed.

意思是设置固定宽度，只显示按钮，然后在更改后将其更改回 100%，以便显示文件名。

回答by 2grit

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

回答by alex

Nope, you'd need to create a custom control.

不，您需要创建一个自定义控件。

回答by jlebrijo

Seems ridiculous for the easiness but for me was enough:

看起来很简单，但对我来说已经足够了：

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

Tested on Chrome 20, Safari 5.1.7 and IE 9.

在 Chrome 20、Safari 5.1.7 和 IE 9 上测试。

Note: in IE9 is a little weird because left a mini input_text area.

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

回答by Pavel Nemec

Try this:

尝试这个：

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

Be careful about the white space - it is important because title="" does not work.

注意空格 - 这很重要，因为 title="" 不起作用。

回答by IshaS

Try the below code in the mouseoverevent

在mouseover事件中尝试以下代码

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

回答by Donald

Even though this is an old post, I think that this answer will be helpful to someone that wishes to do something similar. I wanted a button to insert an image from a mobile device's camera but I didn't want the ugly button "[Choose file] No file selected... " rubbish.

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

I wanted a button:

我想要一个按钮：

• that I could customize e.g. have a image button
• a user would click it and it would ask them for some file input
• use input and post to a server

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

What I did

我做了什么

1. create a button element

   • with an onclick="someFunction()"and some id="some_id"
   • an imgtag with src="someimage"- to display an image rather than some text

2. create a input element

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

3. JavaScript

   • When I click the button, it will fire the clickHiddenInput()function that will execute the clickevent of the element you choose

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

1. 创建按钮元素

   • 有onclick="someFunction()"一些id="some_id"
   • img带有src="someimage"-的标签，用于显示图像而不是一些文本

2. 创建输入元素

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

3. 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
         }
     }
     

回答by haz0rd

I tried using the width settings, but it doesn't work in firefox. if you have a solid consistent background, you can just set the color to be the same as the background. I have a white background so I just:

我尝试使用宽度设置，但它在 Firefox 中不起作用。如果你有一个坚实一致的背景，你可以将颜色设置为与背景相同。我有一个白色背景，所以我只是：

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