javascript Программно выберите файл в поле «Тип ввода» внутри iframe, и при загрузке появится ошибка «Отказано в доступе»

Question

У меня есть iframe внутри главной страницы. Когда кнопка (внутри form1) нажата внутри iframe, она вызывает AJAX, и html-ответ будет являться файлом типа ввода и кнопкой типа ввода внутри формы (скажем, form2), а ответ будет помещен в div для показать его как всплывающее окно над обычным экраном. Используя тип файла ввода, пользователь может выбрать файл, и при нажатии кнопки он вызовет функцию для отправки формы, и файл будет загружен на сервер.

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

Я попытался программно щелкнуть файл типа ввода через javascript на главной странице после заполнения ответа AJAX. Пользователь может выбрать файл, но программно нажать на кнопку приводит к ошибке «Доступ запрещен» в IE.

Я не использую библиотеку js. Нужно ли мне использовать какую-либо дополнительную библиотеку для достижения этой цели?

Answer 1

Требуется программно щелкнуть файл типа ввода и отобразить диалоговое окно открытия файла.

Это требование не может быть надежно выполнено. Некоторые браузеры отвечают на click() на input type="file", другие - нет, другие (IE), кажется, разрешают это, но затем отказываются фактически отправлять форму.

Обходного пути нет, и ни одна библиотека не может обойти это ограничение - если не использовать некоторые не-HTML способы загрузки файла, такие как Flash или Java.

Более того, в стандарте HTML нет ничего, что требовало бы даже быть диалоговым окном открытия файла. Это специфичная для браузера и ОС деталь интерфейса. На других платформах, помимо браузеров Windows для настольных компьютеров, могут быть другие механизмы для отправки файлов, например перетаскивание. На этом уровне вы не можете эффективно взаимодействовать с полем загрузки файла.

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

Ну, это немного выполнимо. Поймать событие change:

<form method="post" action="..." enctype="multipart/form-data">
    <input type="file" id="f"/>
</form>

document.getElementById('f').onchange= function() {
    if (this.value!=='')
        this.form.submit();
};