可以使用HTML按钮上传文件以与W3C File API一起使用吗？

Question

我有一个缩略图界面模型,我想添加上传图像的功能.根据我的模型,界面看起来像这样:

缩略图界面

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

所以,我想在不使用文件输入HTML元素的情况下上传文件.我尝试使用隐藏文件输入元素,并click在单击"添加图标"按钮时使用Javascript 调用其事件处理程序,但调用没有做任何事情.我认为安全可能有一些理由这样做.

有没有人有幸使用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元素.

使用HTML文件API有点不同.阅读Mozilla Developer Network上的这篇文章,了解更多信息.