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

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

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

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

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

Ответы

Ответ 1

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

Ответ 2

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

Ответ 3

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

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

Ответ 4

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

Это сработало для меня (использует 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. Благодарим вас за ответ, если вам это нравится.

Ответ 5

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