Можно ли использовать кнопку HTML для загрузки файла для использования с W3C File API?

Question

У меня есть эскиз интерфейса макета, и я хотел бы добавить возможность загрузки изображения.Согласно моему макету, интерфейс выглядит следующим образом:

Предполагалось, что пользователь нажмет кнопку «Добавить значок», и появится диалоговое окно с файлом,так же, как тот, который появляется при нажатии на вход файла.Я хотел бы использовать File API W3C для асинхронной обработки файла и отображать миниатюру в серой области над кнопкой после завершения загрузки.

Итак, я хотел бы загрузить файл безиспользуя элемент ввода файла HTML.Я пытался работать со скрытым элементом ввода файла и вызывать его обработчик событий click с Javascript, когда нажата кнопка «Добавить значок», но вызов ничего не сделал.Я думаю, что у безопасности может быть для этого какая-то причина.

Кому-нибудь посчастливилось использовать HTML button для загрузки файла раньше?

Answer 1

Уловка, которую я всегда делаю, заключается в том, чтобы обернуть скрытые file input в тег label и затем поместить мои пользовательские элементы input в тег label.По определению нажатие на что-либо внутри тега 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 Developer Network, чтобы узнать больше.