Динамическая отправка формы загрузки файла в IE10 с использованием jQuery
У меня есть форма, единственной целью которой является загрузка файлов, но для удобства пользователя мне нужна красивая кнопка, которая:
- загружает файл диалога
- автоматически отправляет форму, когда файл был выбран
Первоначальное решение было что-то вроде этого JSFiddle, где у вас есть ссылка, которая загружает файл диалога, а затем прослушивает диалог change
Событие для автоматической отправки формы:
$("input[type=file]").on("change", function () {
// auto-submit form
$("form").submit();
});
$("#my-nice-looking-button").on("click", function (e) {
e.preventDefault();
// load file dialog
$("input[type=file]").trigger("click");
});
Если вы попробуете эту скрипку, она будет работать в IE9, Chrome, Firefox и т. Д., Но не работает в Internet Explorer 10. Все функции JavaScript работают, включая форму submit
событие увольняется. Но браузер никогда не отправляет данные формы на сервер; он просто сидит там.
Существуют ли какие-либо меры безопасности или ограничения загрузки файлов, встроенные в IE10, которые мешают этому работать?
1 ответ
Оказывается, да, IE10 не позволяет вам одновременно программно загрузить файл диалога и автоматически отправить форму после change
событие в диалоге файла. Предположительно, один или другой будет работать, но не оба. Я не нашел никакой документации, подтверждающей это утверждение, кроме моих собственных экспериментов.
Решение, которое я нашел, состояло в том, чтобы использовать CSS, чтобы стилизовать кнопку диалогового окна файла так, чтобы она была невидимой, но лежала поверх красивой кнопки, так что, когда вы думаете, что нажимаете на кнопку, вы фактически нажимаете в диалоговом окне выбора файла:
input[type=file] {
/* positioning strategies will vary depending on design */
font-size: 25px;
position: relative;
top: -50px;
left: -10px;
/* make it invisible! */
opacity: 0;
/* make the cursor act like it's hovering over an anchor tag */
cursor: pointer;
cursor: hand;
}
Тогда вам просто нужно слушать change
событие и отправьте форму, как и прежде:
$("input[type=file]").on("change", function () {
// auto-submit form
$("form").submit();
});
Это означает, что вы "органично" загружаете диалоговое окно файла, и IE10 позволяет это делать и позволяет автоматически отправлять форму.
Это решение также работает в WebKit и Firefox.