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

Question

我有Cloudinary生成的输入字段，如下所示。我缩短了它，但它产生了一个相当通用的下降区域和里面的“浏览”按钮。我不需要dropzone - 理想情况下我可以将所有这些都抽象为HTML按钮 - 点击按钮会使用输入字段提示。

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

是否可以使用按钮覆盖上述输入字段？我可以简单地将文件输入字段设置为按钮而不是dropzone +“Browse”按钮吗？

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

Answer 1

您无法真正重新设置文件输入样式，但可以从其他控件触发对其进行单击。

快速而肮脏的例子：

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

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