html - 使用按钮覆盖文件输入字段

Question

我有一个由Cloudinary生成的输入字段，如下所示。我缩短了它，但它在内部生成了一个相当通用的拖放区和“浏览”按钮。我不需要 dropzone - 理想情况下，我可以将所有这些抽象为一个 HTML 按钮 - 点击按钮将使用输入字段进行提示。

<input id="id_picture" class="cloudinary-fileupload " type="file" name="file">

是否可以用按钮覆盖上述输入字段？我可以简单地将文件输入字段设置为看起来像一个按钮而不是 dropzone +“浏览”按钮吗？

抱歉，如果这没有任何意义 - 我通常是后端编码器。如果您需要更多信息，请告诉我。谢谢！

Answer 1

您无法真正重新设置文件输入的样式，但您可以从另一个控件触发对它的单击。

快速而肮脏的例子：

<button onclick="document.getElementById('id_picture').click();">File Upload</button>

然后，您可以使用 css 将真实文件输入定位在屏幕外（不幸display:none的是会阻止点击触发）。