Question

通常，单击<input type="file"/>创建的按钮可调用文件上载对话框。但是，我不想要它附带的文本字段。有没有办法摆脱文本字段？或者是否有另一种方法可以在不使用<input/>的情况下打开文件上传对话框？

Answer 1

添加文件输入，并将其位置设置为相当远的距离添加一个按钮。设置按钮点击$("#myFile").click(); ：d

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

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

Answer 2

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

Answer 3

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

Answer 4

您可以使用闪烁按钮替换它，或者您可以通过css隐藏按钮 - 将您自己的按钮放在输入元素的顶部，然后通过脚本打开选择文件框。

这里有一些例子： inputfile

Answer 5

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

Answer 6

您可以添加自己的按钮并将其放在带有CSS的浏览按钮下。

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

Answer 7

如果您使用的是jQuery，请查看此插件 - https://github.com/ajaxray/bootstrap-file-field

这个小插件会将文件输入字段显示为引导按钮（无文本输入字段），类似于所有浏览器，并且会精美地显示所选文件名（或选择错误）。查看实时演示。

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

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

7 个答案: