javascript - 是否可以使用 HTML 按钮上传文件以供 W3C 文件 API 使用？

Question

我有一个缩略图界面模型，我想添加上传图片的功能。根据我的模型，界面如下所示:

目的是用户单击“添加图标”按钮，然后会弹出一个文件对话框，就像单击文件输入时弹出的对话框一样。我想使用 W3C 的文件 API 来异步处理文件上传，并在上传完成后在按钮上方的灰色区域显示缩略图。

因此，我想在不使用文件输入 HTML 元素的情况下上传文件。我尝试使用隐藏的文件输入元素，并在单击“添加图标”按钮时使用 Javascript 调用其 click 事件处理程序，但调用没有执行任何操作。我认为安全性可能与此有关。

以前有没有人有幸使用 HTML button 上传文件？

Answer 1

我经常使用的技巧是将隐藏的 file input 包装到 label 标签中，然后将我自定义的 input 元素放入 >label 标签。通过 defenition 点击​​ label 标签内的任何内容应该触发 input 里面。根本不需要 JavaScript!

<label>
    <div>
        My custom file input
    </div>
<input type="file" id="file"/>
</label>

CSS: input{visibility:hidden;} 请注意，您不能使用 display:none，因为这样元素将不会呈现。您仍然可以使元素 width:0; height:0; 完全隐藏 input 元素。

Fiddle

使用 HTML 文件 API 有点不同。阅读this article在 Mozilla 开发者网络学习更多。