blocks|key|279825|text|默认工具提示可使用title属性进行编辑|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279826|<input+type='file'+title="your+text"+/>|code-block|syntax|javascript|279827|但如果您尝试删除此工具提示|279828|<input+type='file'+title=""/>|279829|这行不通的。这是我的小窍门，试试title+with+a+space。它会起作用的。：)|279830|<input+type='file'+title="+"/>|279831|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>The default tooltip can be edited by using the title attribute</p>

<pre><code>&lt;input type='file' title="your text" /&gt;
</code></pre>

<p>But if you try to remove this tooltip</p>

<pre><code>&lt;input type='file' title=""/&gt;
</code></pre>

<p>This won't work. Here is my little trick to work this, try title with a space. It will work.:)</p>

<pre><code>&lt;input type='file' title=" "/&gt;
</code></pre>


blocks|key|279612|text|对我来说，我只是希望文本是不可见的，并且仍然使用本机浏览器按钮。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279613|input[type='file']+{
++color:+transparent;
}|code-block|syntax|javascript|279614|我喜欢所有未定义的建议，但我有一个不同的用例，希望这对处于同样情况的人有帮助。|279615|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>For me, I just wanted the text to be invisible and still use the native browser button.</p>

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

<p>I like all of undefined's suggestions but I had a different use case, hope this helps someone in the same situation.</p>


blocks|key|497098|text|我找到了一个非常简单的解决方案，只需在title属性中设置一个空字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|497099|<input+type="file"+value=""+title="+"+/>|code-block|syntax|javascript|497100|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found a solution that is very easy, just set an empty string into the title attribute.</p>

<pre><code>&lt;input type="file" value="" title=" " /&gt;
</code></pre>


blocks|key|496892|text|非常简单，忘记CSS针对输入“类型”的事情，它对我不起作用。我也不知道原因。我在HTML标记中找到了我的解决方案|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496893|<input+type="file"+style="color:transparent;+width:70px;"/>|code-block|syntax|javascript|496894|问题的结束|496895|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Very easy, forget CSS targeting the input["type"] thing, it doesn't work for me. I don't know why. I got my solution in my HTML tag</p>

<pre><code>&lt;input type="file" style="color:transparent; width:70px;"/&gt;
</code></pre>

<p>End of the problem</p>


blocks|key|496488|text|您可以禁用工具提示，在Chrome等webkit浏览器上设置带有空格的标题，在Firefox或IE+(在Chrome+35、FF+29、IE+11、safari+mobile上测试)上设置空白字符串。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496489|$('input[type="file"]').attr('title',+window.webkitURL+?+'+'+:+'');|code-block|syntax|javascript|496490|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can disable the tooltip setting a title with a space on webkit browsers like Chrome and an empty string on Firefox or IE (tested on Chrome 35, FF 29, IE 11, safari mobile)</p>

<pre><code>$('input[type="file"]').attr('title', window.webkitURL ? ' ' : '');
</code></pre>


blocks|key|496691|text|这里的所有答案都过于复杂，否则就是完全错误的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496692|html：|496693|<div>
++++<input+type="file"+/>
++++<button>Select+File</button>
</div>|code-block|syntax|javascript|496694|css：|496695|input+{
++++display:+none;
}|496696|javascript：|496697|$('button').on('click',+function(){
+++$('input').trigger('click');+
});|496698|http://jsfiddle.net/odfe34n8/|offset|length|496699|我以最简单的方式创建了这个小提琴。单击选择文件按钮将调出文件选择菜单。然后你可以以任何你想要的方式设置按钮的样式。基本上，您需要做的就是隐藏文件输入，并在单击另一个按钮时触发合成单击。我在IE9、FF和Chrome上进行了现场测试，它们都工作得很好。|496700|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|T|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|14|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|15|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|17|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|19|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@$S|1B|T|1C|1|1D]]|A|$]]|$1|U|3|V|5|6|7|1E|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|R]]]]

<p>All the answers here are totally overcomplicated, or otherwise just totally wrong.</p>

<p>html:</p>

<pre class="lang-html prettyprint-override"><code>&lt;div&gt;
    &lt;input type="file" /&gt;
    &lt;button&gt;Select File&lt;/button&gt;
&lt;/div&gt;
</code></pre>

<p>css:</p>

<pre class="lang-css prettyprint-override"><code>input {
    display: none;
}
</code></pre>

<p>javascript:</p>

<pre class="lang-js prettyprint-override"><code>$('button').on('click', function(){
   $('input').trigger('click'); 
});
</code></pre>

<p><a href="http://jsfiddle.net/odfe34n8/" rel="noreferrer">http://jsfiddle.net/odfe34n8/</a></p>

<p>I created this fiddle, in the most simplistic way. Clicking the Select File button will bring up the file select menu. You could then stylize the button any way you wanted. Basically, all you need to do is hide the file input, and trigger a synthetic click on it when you click another button. I spot tested this on IE 9, FF, and Chrome, and they all work fine.</p>


blocks|key|279963|text|这对我来说很有效(至少在Chrome和Firefox中是这样的)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279964|<input+type="file"+accept="image/*"+title="&nbsp;"/>|code-block|syntax|javascript|279965|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This one works for me (at least in Chrome and Firefox):</p>

<pre><code>&lt;input type="file" accept="image/*" title="&amp;nbsp;"/&gt;
</code></pre>


blocks|key|496374|text|这是一个棘手的问题。我找不到一种方法来选择“没有选择文件”元素，所以我使用:after伪选择器创建了一个掩码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496375|我的解决方案还需要使用以下伪选择器来设置按钮的样式：|496376|::-webkit-file-upload-button|code-block|syntax|javascript|496377|试试这个：http://jsfiddle.net/J8Wfx/1/|offset|length|496378|仅供参考:这只适用于webkit浏览器。|496379|附注:如果有人知道如何在webkit检查器中查看webkit伪选择器，请让我知道|496380|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/J8Wfx/1/^0|0|0|0|5|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|11|8|@]|9|@$K|12|L|13|1|14]]|A|$]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>This is a tricky one. I could not find a way to select the 'no file chosen' element so I created a mask using the :after pseudo selector.</p>

<p>My solution also requires the use of the following pseudo selector to style the button:</p>

<pre><code>::-webkit-file-upload-button
</code></pre>

<p>Try this: <a href="http://jsfiddle.net/J8Wfx/1/" rel="nofollow">http://jsfiddle.net/J8Wfx/1/</a></p>

<p>FYI: This will only work in webkit browsers.</p>

<p>P.S if anyone knows how to view webkit pseudo selectors like the one above in the webkit inspector please let me know</p>


blocks|key|496561|text|跨所有浏览器和简单。这对我来说就够了|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496562|​|496563|$(function+()+{
+++++$('input[type="file"]').change(function+()+{
++++++++++if+($(this).val()+!=+"")+{
+++++++++++++++++$(this).css('color',+'#333');
++++++++++}else{
+++++++++++++++++$(this).css('color',+'transparent');
++++++++++}
+++++});
})|code-block|syntax|javascript|496564|input[type="file"]{
++++color:+transparent;
}|496565|<script+src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input+type="file"+name="app_cvupload"+class="fullwidth+input+rqd">|496566|496567|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Across all browsers and simple. this did it for me </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
     $('input[type="file"]').change(function () {
          if ($(this).val() != "") {
                 $(this).css('color', '#333');
          }else{
                 $(this).css('color', 'transparent');
          }
     });
})</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="file"]{
    color: transparent;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

&lt;input type="file" name="app_cvupload" class="fullwidth input rqd"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|279462|text|要实现这一点，您需要对控件进行大量的自定义。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279463|请按照以下网址的指南操作：http://www.quirksmode.org/dom/inputfile.html|offset|length|279464|entityMap|0|LINK|mutability|MUTABLE|url|http://www.quirksmode.org/dom/inputfile.html^0|0|D|18|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>You will need to customise the control quite a lot to achieve this.</p>

<p>Please follow the guide at: <a href="http://www.quirksmode.org/dom/inputfile.html" rel="nofollow">http://www.quirksmode.org/dom/inputfile.html</a></p>


blocks|key|496944|text|用来包裹并使其不可见。在Chrome，Safari+&&+FF中工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496945|​|496946|label+{+
++padding:+5px;
++background:+silver;
}
label+>+input[type=file]+{
++++display:+none;
}|code-block|syntax|javascript|496947|<label>
++<input+type="file">
++select+file
</label>|496948|496949|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Wrap  with  and make  invisible.
Work in Chrome, Safari &amp;&amp; FF.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>label { 
  padding: 5px;
  background: silver;
}
label &gt; input[type=file] {
    display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;label&gt;
  &lt;input type="file"&gt;
  select file
&lt;/label&gt;</code></pre>
</div>
</div>
</p>


blocks|key|280003|text|最好避免使用不必要的javascript。您可以利用标签标签来展开输入的单击目标，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280004|<label>
++<input+type="file"+style="display:+none;">
++<a>Open</a>
</label>|code-block|syntax|javascript|280005|即使输入是隐藏的，该链接仍然可以作为它的单击目标，并且您可以随心所欲地设置它的样式。|280006|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>It's better to avoid using unnecessary javascript. You can take advantage of the label tag to expand the click target of the input like so:</p>

<pre><code>&lt;label&gt;
  &lt;input type="file" style="display: none;"&gt;
  &lt;a&gt;Open&lt;/a&gt;
&lt;/label&gt;
</code></pre>

<p>Even though input is hidden, the link still works as a click target for it, and you can style it however you want.</p>


blocks|key|280242|text|即使将不透明度设置为零，也会显示工具提示。在元素上尝试visibility:hidden。这对我来说很有效。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|280243|entityMap^0|R|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Even you set opacity to zero, the tooltip will appear. Try <code>visibility:hidden</code> on the element. It is working for me.</p>


blocks|key|497118|text|这对我很有效！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|497119|input[type="file"]{
++font-size:+0px;
}|code-block|syntax|javascript|497120|然后，您可以使用不同类型的样式，如width、height或其他属性来创建您自己的输入文件。|offset|length|style|CODE|497121|entityMap^0|0|0|H|5|N|6|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>It works for me!</p>

<pre><code>input[type="file"]{
  font-size: 0px;
}
</code></pre>

<p>Then, you can use different kind of styles such as <code>width</code>, <code>height</code> or other properties in order to create your own input file.</p>


blocks|key|496300|text|给-webkit-appearance:一次机会。不管怎样，值得一试。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|496301|http://css-infos.net/property/-webkit-appearance|496302|希望这能有所帮助:)|496303|entityMap|0|LINK|mutability|MUTABLE|url^0|1|J|0|0|1C|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@$9|U|A|V|1|W]]|E|$]]|$1|H|3|I|5|6|7|X|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|G]]]]

<p>Give <code>-webkit-appearance:</code> a go. Worth a try anyway.</p>

<p><a href="http://css-infos.net/property/-webkit-appearance" rel="nofollow">http://css-infos.net/property/-webkit-appearance</a></p>

<p>Hope that helps :)</p>


blocks|key|497150|text|惊讶地发现没有人提到event.preventDefault()|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|497151|$("input[type=file]").mouseover(function(event)+{
++++event.preventDefault();
++++//+This+will+disable+the+default+behavior+of+browser
+});|code-block|syntax|javascript|497152|entityMap^0|A|M|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Surprise to see no one mentioned about <code>event.preventDefault()</code></p>

<pre><code>$("input[type=file]").mouseover(function(event) {
    event.preventDefault();
    // This will disable the default behavior of browser
 });
</code></pre>


blocks|key|496321|text|您可以设置yor元素的宽度，它将只显示按钮，并隐藏“未选择文件”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496322|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>you can set a width for yor element which will show only the button and will hide the "no file chosen".</p>


blocks|key|496434|text|我在寻找好的答案...我发现了这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|496435|首先删除“未选择文件”|496436|input[type="file"]{
font-size:+0px;
}|code-block|syntax|javascript|496437|然后用-webkit-file-upload-button操作按钮，如下所示：|offset|length|style|CODE|496438|input[type="file"]::-webkit-file-input-button{
font-size:+16px;+/*normal+size*/
}|496439|希望这就是你要找的东西，它对我很有效。|496440|entityMap^0|0|0|0|3|Q|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|11|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>I look for good answer for this... and I found this:</p>

<p>First delete the 'no file chosen'</p>

<pre><code>input[type="file"]{
font-size: 0px;
}
</code></pre>

<p>then work the button with the <code>-webkit-file-upload-button</code>, this way:</p>

<pre><code>input[type="file"]::-webkit-file-input-button{
font-size: 16px; /*normal size*/
}
</code></pre>

<p>hope this is what you were looking for, it works for me.</p>


blocks|key|279727|text|结合上面的一些建议，使用jQuery，下面是我所做的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279728|input[type='file'].unused+{
++color:+transparent;
}|code-block|syntax|javascript|279729|和：|279730|$(function()+{
++$("input[type='file'].unused").click(+function()+{$(this).removeClass('unused')});
};|279731|并将“未使用”类放在文件输入中。这很简单，而且效果很好。|279732|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Combining some of the suggestions above, using jQuery, here is what I did:</p>

<pre><code>input[type='file'].unused {
  color: transparent;
}
</code></pre>

<p>And:</p>

<pre><code>$(function() {
  $("input[type='file'].unused").click( function() {$(this).removeClass('unused')});
};
</code></pre>

<p>And put the class "unused" on your file inputs.  This is simple and works pretty well.</p>


blocks|key|279932|text|对我来说，最好的解决方案是将输入的type=“文件”包装在一个包装器中，并添加一些jquery代码：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|279933|​|279934|$(function(){
	function+readURL(input){
++++++++if+(input.files+&&+input.files[0]){
++++++++++++var+reader+=+new+FileReader();
++++++++++++
++++++++++++reader.onload+=+function+(e){
++++++++++++++++$('#uploadImage').attr('src',+e.target.result);
++++++++++++}
++++++++++++reader.readAsDataURL(input.files[0]);
++++++++}
++++}
++++$("#image").change(function(){
++++++++readURL(this);
++++});
});|code-block|syntax|javascript|279935|#image{
	position:+absolute;
	top:+0;
	left:+0;
	opacity:+0;
	width:+75px;
	height:+35px;
}
#uploadImage{
	position:+relative;
	top:+30px;
	left:+70px;
}
.button{
	position:+relative;
	width:+75px;
	height:+35px;
	border:+1px+solid+#000;
	border-radius:+5px;
	font-size:+1.5em;
	text-align:+center;
	line-height:+34px;
}|279936|<form+action="#"+method="post"+id="form"+>
	<div+class="button">
		Upload<input+type="file"+id="image"+/>
+++++</div>
+++++<img+id="uploadImage"+src="#"+alt="your+image"+width="350"+height="300"+/>
+</form>|279937|279938|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>The best solution, for me, is to wrap input [type="file"] in a  wrapper, and add some jquery code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(function(){
	function readURL(input){
        if (input.files &amp;&amp; input.files[0]){
            var reader = new FileReader();
            
            reader.onload = function (e){
                $('#uploadImage').attr('src', e.target.result);
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#image").change(function(){
        readURL(this);
    });
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#image{
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	width: 75px;
	height: 35px;
}
#uploadImage{
	position: relative;
	top: 30px;
	left: 70px;
}
.button{
	position: relative;
	width: 75px;
	height: 35px;
	border: 1px solid #000;
	border-radius: 5px;
	font-size: 1.5em;
	text-align: center;
	line-height: 34px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form action="#" method="post" id="form" &gt;
	&lt;div class="button"&gt;
		Upload&lt;input type="file" id="image" /&gt;
     &lt;/div&gt;
     &lt;img id="uploadImage" src="#" alt="your image" width="350" height="300" /&gt;
 &lt;/form&gt;</code></pre>
</div>
</div>
</p>


blocks|key|280193|text|我想出了一个老生常谈的解决方案，完全删除了“没有选择文件”加上在文本后面添加的额外空格(在Chrome中，我得到了类似于：“没有选择文件")。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280194|这完全搞乱了我的页面对齐，所以我真的很努力才找到了解决方案。在输入标记的style属性中，将"+width“设置为按钮的宽度将消除尾随文本和空格。由于按钮的宽度在所有浏览器中都不相同(例如，在Firefox中稍小)，因此您还需要将样式的颜色设置为与页面背景相同的颜色(否则可能会显示一个零散的"No“)。我的输入文件标签如下所示：|280195|<input+style="float:left;+**width:88px;**+**color:#000000;**"+type="file"+id="fileInput"+onclick="fileOpen()">++++|code-block|syntax|javascript|280196|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I came up with a hacky solution that totally removes "No file chosen" plus the extra space that is added after that text (in Chrome I get something like: 
"No file chosen                   "). </p>

<p>This was totally messing up my page alignment, so I really fought with it to find a solution. Inside the input tag's style attribute, setting "width" to the width of the button will eliminate the trailing text and spaces. Since the width of the button is not the same in all browsers (it's a little smaller in Firefox, for example), you'll also want to set the style's color to the same color as the background of the page (otherwise a stray "No" may show through). My input file tag looks like this: </p>

<pre><code>&lt;input style="float:left; **width:88px;** **color:#000000;**" type="file" id="fileInput" onclick="fileOpen()"&gt;    
</code></pre>


blocks|key|280401|text|我知道这有点花里胡哨，但我所需要的就是在样式表中将颜色设置为透明-内联看起来像这样的颜色“style=：transparent；”。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280402|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>I know it is a bit of a hack, but all I required was to set the color to transparent in the style sheet - inline would look like this style=&quot;color:transparent;&quot;.</p>


blocks|key|280497|text|对于前三个不起作用的任何人：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|280498|创建您的输入元素：|280499|<input+type='file'+name='file'+id='file'+/>|code-block|syntax|javascript|280500|通过输入元素的Id将输入元素的样式设置为不存在的位置：|280501|#file{+color:+#ffffff;+width:+0px;+}|280502|然后在原始输入前面创建一个新按钮，使用onclick函数运行单击原始输入的javascript：|280503|<button+onclick='clicker()'>BROWSE</button><input+type='file'+name='file'+id='file'+/>+
//+can+see+the+new+button+but+not+the+original+input:|280504|Javascript：|280505|function+clicker(){+document.getElementById('file').click();+}|280506|结果：|280507|function+clicker(){
document.getElementById('file').click();
}|280508|#file{
++color:+#ffffff;
++width:+0px;
}|280509|<html>
<head>
</head>
<body>
FILE:+<button+onclick='clicker()'>BROWSE</button><input+type='file'+id='file'/>
<br>

</body>
</html>|280510|​|280511|entityMap^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|1A|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|1B|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|1C|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|F|7|1E|8|@]|9|@]|A|$G|H]]|$1|U|3|V|5|6|7|1F|8|@]|9|@]|A|$]]|$1|W|3|X|5|F|7|1G|8|@]|9|@]|A|$G|H]]|$1|Y|3|Z|5|F|7|1H|8|@]|9|@]|A|$G|H]]|$1|10|3|11|5|F|7|1I|8|@]|9|@]|A|$G|H]]|$1|12|3|13|5|6|7|1J|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1K|8|@]|9|@]|A|$]]]|15|$]]

<p>For anybody that the 3 top did not work:</p>
<p>create your input element:</p>
<pre><code>&lt;input type='file' name='file' id='file' /&gt;
</code></pre>
<p>set style for the input element by it's Id to where it appears non-existent:</p>
<pre><code>#file{ color: #ffffff; width: 0px; }
</code></pre>
<p>then create a new button infront of the original input, with onclick function to run javascript that clicks the original input:</p>
<pre><code>&lt;button onclick='clicker()'&gt;BROWSE&lt;/button&gt;&lt;input type='file' name='file' id='file' /&gt; 
// can see the new button but not the original input:
</code></pre>
<p>Javascript:</p>
<pre><code>function clicker(){ document.getElementById('file').click(); }
</code></pre>
<p>RESULT:
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function clicker(){
document.getElementById('file').click();
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#file{
  color: #ffffff;
  width: 0px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
&lt;head&gt;
&lt;/head&gt;
&lt;body&gt;
FILE: &lt;button onclick='clicker()'&gt;BROWSE&lt;/button&gt;&lt;input type='file' id='file'/&gt;
&lt;br&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


<p>I would like to remove the "No file chosen" tooltip from a file input in Google Chrome (I see that no tooltip is displayed in Firefox).</p>

<p>Please notice that I'm talking not about the text inside the input field, but about the tooltip that appears when you move the mouse over the input.</p>

<p>I've tried this with no luck:</p>

<pre><code>$('#myFileInput').attr('title', '');
</code></pre>


How can I remove the "No file chosen" tooltip from a file input in Chrome?

jQuery

我想从Google Chrome的文件输入中删除“未选择文件”工具提示(我看到Firefox中没有显示任何工具提示)。请注意，我说的不是输入字段中的文本，而是当您将鼠标移到输入上时出现的工具提示。我试过了，但没有成功：$('#myFileInput').attr('title', '');

问如何从Chrome中的文件输入中删除“未选择文件”工具提示？
EN

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Chrome中的文件输入中删除“未选择文件”工具提示？EN

回答 23

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何从Chrome中的文件输入中删除“未选择文件”工具提示？
EN