我怎样才能摆脱 HTML 文件上传字段中“选择文件”按钮旁边的文本字段，就像 GMail 一样？答案

【问题标题】：How can I get rid of the text field next to the “Choose file” button in HTML file upload fields, like GMail does?我怎样才能摆脱 HTML 文件上传字段中“选择文件”按钮旁边的文本字段，就像 GMail 一样？
【发布时间】：2011-04-08 07:29:41
【问题描述】：

嘿，
我在 HTML 文件中有一个文件上传表单。代码如下：

<form>
Select File:<input type="file">
</form>

我怎样才能只有一个按钮（或链接）来上传文件，而没有这个普通的文本字段和浏览按钮？ GMail 实现了这一点，但我不知道如何。

【问题讨论】：

如果您只有一个按钮，用户将如何查看他们选择上传的文件？这就是“文本字段”的用途。（它实际上不是一个文本字段，因为用户不能自己在其中输入任意文本。）
最终用户将如何选择文件？
stackoverflow.com/questions/2275990/…
简单地说，我想要一个像gmail这样的上传文件。
@Deepak：啊哈。当我登录 GMail 并右键单击他们的文件上传链接时，上下文菜单中包含“About Adobe Flash 10.2...”项。所以看起来他们正在为此使用 Flash。

标签： html

【解决方案1】：

这个http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom怎么样

【讨论】：

【解决方案2】：

有一个雅虎用户界面上传器，见http://developer.yahoo.com/yui/uploader/

不过，它需要在浏览器上使用 Flash。

JQuery UI 还有一个自定义的文件上传器：http://wiki.jqueryui.com/w/page/12137894/FileUploader

这将涉及 JavaScript。

【讨论】：

【解决方案3】：

简单。这是怎么回事。首先，您创建一个虚拟按钮元素或锚元素。将其 z-index 设置为 1。将文件上传 (<input type='file' >) 放在上述锚或按钮元素（虚拟）上，并将文件上传的不透明度过滤器设置为零，z-index 为 2。现在它将显示为尽管正在单击您的链接或按钮或图像。而顶部的文件上传层是被单击的层，因此您将获得文件上传对话框。（定位文件上传元素可以通过css轻松完成。）

【讨论】：

【解决方案4】：

如果你使用 jQuery，看看这个插件 - https://github.com/ajaxray/bootstrap-file-field

这个小插件会将文件输入字段显示为作为引导按钮（无文本字段），在所有浏览器中都类似，并且会漂亮地显示选定的文件名（或选择错误）。查看他们的现场演示。

此外，您可以使用简单的数据属性或 JS 设置来设置各种限制。例如，data-file-types="image/jpeg,image/png" 将限制选择除 jpg 和 png 图像以外的文件类型。

【讨论】：

【解决方案5】：

如果您想去掉“选择文件”按钮旁边的字段，您几乎必须使用the JavaScript File API 编写自己的文件上传字段，或者（如果您需要满足older browsers that don’t support it ) 像 Flash 这样的浏览器插件。

Web 浏览器通常决定它们如何显示 HTML 表单控件。这实际上非常好，因为这意味着不同网站上的字段看起来相同，这意味着用户可以确信他们知道控件的作用。

【讨论】：

这个怎么样 - github.com/ajaxray/bootstrap-file-field ？它的体积非常小，只有 javascript 和 css（没有 flash），并且可以使用 :)
@Anis：是的——我认为新的文件 API 可以让你在没有 Flash 的现代浏览器中做到这一点。