是否可以使用HTML按钮上传文件以用于W3C File API？

Question

我有一个缩略图界面样机，我想添加上传图片的功能。根据我的样机，界面看起来是这样的：

目的就是让用户可以点击“添加图标”按钮，文件对话框会弹出，就像是弹出一个当文件输入被点击时启动。我希望使用W3C的File API异步处理文件上传，并在上传完成后在按钮上方的灰色区域显示缩略图。

所以，我想上传一个文件，而不使用文件输入HTML元素。我尝试使用隐藏文件输入元素，并在单击“添加图标”按钮时调用其带有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元素。

Fiddle

使用HTML文件API是一个有点不同。在Mozilla开发者网络上阅读this article即可获得更多。