Можно ли программно запустить диалоговое окно файлового браузера в JavaScript?
Вместо использования тега <input type = "file"> я хотел бы иметь кнопку, запускающую диалоговое окно файлового браузера.
Моя первая мысль заключалась в том, чтобы иметь скрытый тег ввода файла и кнопку. Я бы использовал кнопку, нажав на кнопку, чтобы запустить onclick скрытого ввода файла, но мне не удалось заставить это работать должным образом.
Вопрос в том, возможно ли это вообще? И, во-вторых, есть ли лучший способ сделать это, сохранив при этом возможность отправлять информацию обратно в форме?
Это будет нижний уровень деградации функциональности (от Flash до JavaScript (наш сайт не работает без JS)), поэтому он должен работать только с базовыми JS и HTML.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 5
Да, это возможно (в большинстве браузеров) через непрозрачность. Вот учебник.
Обратите внимание, что это проблема безопасности, и могут быть предприняты действия, чтобы предотвратить это в будущих браузерах.
Возможный? да. Рекомендуемые? Нет. Проблема с безопасностью? Определенно.
Я проверил это, и он не делает то, что я хочу. И из-за потенциальных проблем с безопасностью / устареванием я не буду его использовать. Тем не менее, спасибо за ответ.
Как это проблема безопасности? Он просто позволяет вам управлять представлением виджета пользовательского интерфейса выбора файлов. Это все еще зависит от действий пользователя.
Это называется кликджекингом и может использоваться, чтобы люди нажимали на такие вещи, как невидимые кнопки «Нравится» в Facebook.
Я делал это (см. Ответ ceejayoz) в прошлом, но теперь рекомендую этого не делать. Это проблема безопасности, и на нее нельзя полагаться в будущем. Гораздо лучшим решением является постепенное улучшение вашей формы загрузки, чтобы вводимый файл заменялся загрузчиком на основе Flash или Java с большим количеством функций (или использовать лучшие функции в HTML 5, если они станут доступны).
Перед использованием flash или java-апплета вы всегда должны использовать простую форму.
@Jan, это то, что я сказал в своем ответе: «постепенно улучшать» означает, что вы начинаете с простого HTML и улучшаете его на стороне клиента (JS, Flash, что угодно) после загрузки.
Вместо того, чтобы пытаться взломать управление вводом файлов в браузере, я бы предложил использовать загрузчик файлов на основе флэш-памяти, например SWFUpload. Я начал использовать это в одном из своих проектов и был ОЧЕНЬ доволен этим.
Вы получаете обратные вызовы javascript и можете делать все, что хотите для пользовательского интерфейса (флэш - это просто функция загрузки).
Я бы предпочел избегать уловок с прозрачностью.
Это сработало для меня (использует 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. Спасибо, что проголосовали за мой ответ, если он вам нравится.
он возвращает только имя файла, но как получить весь путь к файлу, например c:/test.png
@ jerith2, вы не можете получить полный путь, и это все равно бесполезно. Вы можете прочитать файл с помощью объекта FileReader, если хотите увидеть двоичные данные файла (которые при необходимости можно преобразовать в любые другие данные).
Вы можете сделать это без каких-либо проблем с безопасностью. Просто код, который на onmouseenter будет продвигать zindex реальной кнопки загрузки (вы можете использовать для нее непрозрачность или сделать ее прозрачной), и тогда вам не нужно будет запускать щелчок, а просто используйте щелчок от пользователя.
У меня это сработало ... см. Мой ответ ниже. Может быть, дело в совместимости с браузером. Этому вопросу 6 лет.