是否可以使用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即可獲得更多。