如何从 HTML 文件输入中删除文本字段答案

【问题标题】：How to remove text field from HTML file input如何从 HTML 文件输入中删除文本字段
【发布时间】：2011-04-26 18:11:06
【问题描述】：

通常，通过单击<input type="file"/> 创建的按钮来调用文件上传对话框。但是，我不想要它附带的文本字段。有没有办法摆脱文本字段？或者有没有不使用<input/>的替代方法来打开文件上传对话框？

【问题讨论】：

stackoverflow.com/questions/1084925/… 的副本？

【解决方案1】：

添加文件输入，并将其位置设置为相当远。
添加一个按钮。将按钮 onclick 设置为$("#myFile").click(); :D

<input id="myFile" name="file" type="file" style="position:absolute;left:-10000px;top:-10000px;">

<button onclick="$('#myFile').click();">Browse</button>

【讨论】：

【解决方案2】：

同意亚历克斯

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

【讨论】：

【解决方案3】：

您可以使用 Flash 替代方案。我使用了swfUpload，取得了巨大的成功。 Uploadify，是一个类似的选择。这两个都有很好的功能集，包括进度条和多次上传。

【讨论】：

【解决方案4】：

您可以使用 flash-button 替换它，如dustin 所述，或者您可以通过 css 将您自己的按钮放在输入元素顶部并通过脚本打开选择文件框来隐藏该按钮。

这里有一些例子： inputfile

【讨论】：

【解决方案5】：

查看http://www.uploadify.com/ jQuery 插件。

【讨论】：

【解决方案6】：

您可以添加自己的按钮并使用 CSS 将其放置在浏览按钮下方。

然后将文件输入设置为 0 不透明度。

【讨论】：

【解决方案7】：

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

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

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

【讨论】：