В JavaScript возможно ли запускать диалог браузера файлов программно?

Question

Вместо использования тега <input type="file"> я хотел бы иметь кнопку, которая запускает диалоговое окно браузера файлов.

Моей первой мыслью было иметь скрытый тег ввода файла и кнопку. Я бы использовал нажатие кнопки на кнопке, чтобы вызвать щелчок скрытого ввода файла, но я не смог заставить это работать должным образом.

Итак, вопрос в том, возможно ли это? И, во-вторых, есть ли лучший способ сделать это и при этом иметь возможность отправлять информацию обратно в форме?

Это будет нижний уровень ухудшающей функциональности (от Flash до JavaScript (наш сайт не работает без JS)), поэтому он должен работать только с базовыми JS и HTML.

Answer 1

Да, это возможно (в большинстве браузеров) через непрозрачность. Вот учебник .

Answer 2

Я бы предпочел избежать уловок прозрачности.

Это сработало для меня (использует jQuery):

$("#upload-box").change(function(){
    $("#upload-click-handler").val($(this).val());
});
$("#upload-click-handler").click(function(){
    $("#upload-box").click();
});

И HTML:

<input id="upload-box" style="visibility:hidden;height:0;" name="Photo" type="file" />
<input id="upload-click-handler" type="text" readonly />

Создает ввод текста, скрытый ввод загрузки и исправляет (= маршруты) щелчок на вводе текста для ввода скрытого файла.

Когда файл выбран, он запишет имя файла в текстовом вводе в соответствии с тем, что большинство пользователей ожидают от интерфейса.

Должно работать на FF, Chrome, IE9 и +. Я не проверял это на IE8.

Вот jsfiddle . Спасибо, что проголосовали за мой ответ, если вам это нравится.

Answer 3

Вместо того, чтобы пытаться взломать элемент управления вводом файлов в браузере, я бы предложил использовать загрузчик файлов на основе флэш-памяти, например SWFUpload . Я начал использовать это в одном из моих проектов и был ОЧЕНЬ доволен этим.

Вы получаете обратные вызовы JavaScript и можете делать все, что угодно для пользовательского интерфейса (флэш-память - это просто функция загрузки).

Answer 4

Я делал это (см. Ответ ceejayoz) в прошлом, но теперь рекомендую против этого. Это проблема безопасности, и на нее нельзя полагаться в будущем. Гораздо лучшим решением является постепенное улучшение формы загрузки, чтобы ввод файла заменялся загрузчиком на основе Flash или Java с большим количеством функций (или использовать лучшие функции в HTML 5, если они станут доступны).

Answer 5

Вы можете сделать это без проблем с безопасностью. Просто код, который на onmouseenter будет продвигать zindex кнопки реальной загрузки (вы можете использовать прозрачность на ней или сделать ее прозрачной), и тогда вам не нужно будет запускать щелчок, а просто использовать щелчок пользователя.