如何在 Html 文件上传中隐藏文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2034826/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to hide text field in Html File Upload
提问by dswatik
I am wondering how to hide the text field portion of a standard html file upload tag
我想知道如何隐藏标准 html 文件上传标签的文本字段部分
for example
例如
<input type="file" name="somename" size="chars">
This generates obviously a text field and next to that field is a browse button... I want to hide the text field part but keep the button.
这显然会生成一个文本字段，该字段旁边是一个浏览按钮......我想隐藏文本字段部分但保留按钮。
回答by shiba
This will surely work i have used it in my projects.I hope this helps :)
这肯定会起作用，我已经在我的项目中使用过它。我希望这会有所帮助:)
<input type="file" id="selectedFile" style="display: none;" />
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
回答by Josh Anderson
I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.
我建议隐藏整个内容并放置一个单独的按钮对象，单击该对象时，最终会单击输入的浏览按钮。
You can do this with CSS and javascript -- check out this article(actually the second time I've used this reference today).
您可以使用 CSS 和 javascript 来完成此操作——请查看这篇文章（实际上是我今天第二次使用此参考资料）。
回答by Farzad YZ
The easiest way as not mentioned in any answer would be to use a labelfor the input.
任何答案中都没有提到的最简单的方法是使用 alabel作为input.
<input type="file" name="myFile" id="myFile">
<label for="myFile">Choose your file</label>
input[type="file"] { display: none; }
Using labelwill be useful because clicking on the label is clicking on the input.
This will only work when input's idis equal to label's forattribute.
使用label会很有用，因为点击标签就是点击输入。这仅在输入id等于标签的for属性时才有效。
回答by ksemeks
You can put an image as a background for the button. That worked for me, a while ago.
您可以将图像作为按钮的背景。不久前，这对我有用。
回答by Pekka
The fileinput button is extremely difficult to style and manipulate, mainly for security reasons.
该file输入按钮是风格和操作非常困难，主要是出于安全考虑。
If you really need to customize your upload button, I recommend a Flash based uploader like SWFUploador Uploadifythat enables you to use a custom image as button, display a progress bar, and other things.
如果您确实需要自定义上传按钮，我建议您使用基于 Flash 的上传器，例如SWFUpload或Uploadify，它使您能够将自定义图像用作按钮、显示进度条等。
However, its basic philosophy differs from just embedding a control into a form. The uploading process takes place separately. Make sure you check out first whether this works for you.
然而，它的基本原理不同于仅仅将控件嵌入到表单中。上传过程单独进行。确保您首先检查这是否适合您。
回答by Paul Sweatte
input[type="file"] { outline: none; cursor: pointer; position: absolute; top:0; clip: rect(0 265px 22px 155px); } /* Hide input field */
@-moz-document url-prefix()
{
input[type="file"] { clip: rect(0, 265px, 22px, 125px); } /* Mozilla */
}
* > /**/ input[type="file"], x:-webkit-any-link { clip: rect(0, 86px, 22px, 0); } /* Webkit */
This will do the same without JavaScript, but requires absolute positioning to use the clipproperty.
这将在没有 JavaScript 的情况下执行相同的操作，但需要绝对定位才能使用该clip属性。
References
参考
回答by Anis
If you are using jQuery, have a look at this plugin - https://github.com/ajaxray/bootstrap-file-field
如果您使用 jQuery，请查看此插件 - https://github.com/ajaxray/bootstrap-file-field
It will display the file input field as a bootstrap button and will show selected file names beautifully. Additionally, you can set various restrictions using simple data-attributes or settings in js.
e,g, data-file-types="image/jpeg,image/png"will restrict selecting file types except jpg and png images.
它会将文件输入字段显示为引导按钮，并将精美地显示所选文件名。此外，您可以使用简单的数据属性或 js 中的设置来设置各种限制。
例如，data-file-types="image/jpeg,image/png"将限制选择除 jpg 和 png 图像之外的文件类型。
回答by nimatra
Try adding this css to your input
尝试将此 css 添加到您的输入中
font-size: 0;
回答by Andurit
Hello I get inspired by @shiba and here is solution in Angular 9:
你好，我受到@shiba 的启发，这里是 Angular 9 中的解决方案：
<input type="file" [id]="inputId" class="form-control" [style.display]="'none'"
[accept]="acceptedDocumentTypes" [multiple]="true" #fileInput
(change)="fileChange($event)" (blur)="onTouched()">
<input type="button" class="form-control" value="Browse..." (click)="fileInput.click()"/>
