javascript 如何从 HTML 文件输入中删除文本字段
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3956286/
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 remove text field from HTML file input
提问by Dave
Normally, a file upload dialog is invoked by clicking the button created by <input type="file"/>. But then, I don't want the text field that comes with it. Is there a way to get rid of the text field? Or is there an alternative way to open the file upload dialog without using <input/>?
通常，通过单击由 创建的按钮调用文件上传对话框<input type="file"/>。但是，我不想要它附带的文本字段。有没有办法摆脱文本字段？或者有没有其他方法可以在不使用的情况下打开文件上传对话框<input/>？
回答by Ferid Gürbüz
Add file input, and set its position to quite far away.
Add a button.
Set buttons onclick to $("#myFile").click();:D
添加文件输入，并将其位置设置为相当远。
添加一个按钮。将按钮 onclick 设置为$("#myFile").click();:D
<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">
<button onclick="$('#myFile').click();">Browse</button>
回答by diablero13
agree with alex
同意亚历克斯
<style>
.file_wrap{
background:url(file.jpg);
overflow:hidden;
width:30px;
height:10px;
}
.file_wrap input{
opacity:0;
font-size:999px;
cursor:pointer;
}
</style>
<div class="file_wrap">
<input type="file" />
</div>
回答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
This tiny plugin will display the file input field as a bootstrap button (no text input field), similar in all browser and will show selected file names (or selection errors) beautifully. Check their live demo.
这个小插件将文件输入字段显示为引导按钮（无文本输入字段），在所有浏览器中都类似，并将精美地显示所选文件名（或选择错误）。检查他们的现场演示。
Additionally you can set various restrictions using simple data-attributes or JS settings. 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 alex
You can add your own button and position it under the browse button with CSS.
您可以添加自己的按钮并将其放置在使用 CSS 的浏览按钮下。
Then set the file input to have 0 opacity.
然后将文件输入设置为 0 不透明度。
回答by Dustin Laine
回答by Simon
You could replace it with a flash-button as dustin stated or you could hide the button by css-placing your own button on top of the input element and open the select file box by a script.
你可以用一个 flash-button 替换它，正如 dustin 所说，或者你可以通过 css-将你自己的按钮放在 input 元素的顶部并通过脚本打开选择文件框来隐藏按钮。
Some examples here: inputfile
这里的一些例子： inputfile中
回答by Parker
Check out the http://www.uploadify.com/jQuery plugin.
查看http://www.uploadify.com/jQuery 插件。
