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

Question

Я пытаюсь получить следующее:

form 1
   text input
   text input
   previewimage
   form 2
     file input, upload automatically on selecting file to hidden iframe and generate previewimage
   /form 2
   text input
   submit
/form 1

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

Я знаю, что вложенные формы на самом деле не разрешены, но они все еще работают. Однако я столкнулся с ошибкой, и это jQuery отправляет основную форму (форма 1), когда она должна отправить форму 2! Похоже, что поскольку у меня есть форма AJAX, отправляемая для формы 1, это событие вызывается на замене формы 2 вместо отправки формы 2, как и должно быть, даже если мой код говорит $ ('# form2'). Submit (). Если форма 1 отправлена ​​нормально, проблема не проявляется.

Для современных браузеров я могу просто вставить iframe и форму 2 в тело документа и запустить диалог файлов через JS, щелкнув ссылку. Но для любой версии IE поле ввода файла должно присутствовать, поскольку IE, по-видимому, не позволяет вводить файл при замене, если пользователь не нажал на фактическое поле.

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

Есть ли более разумный способ, которым я могу это реализовать?

Answer 1

Решил это, добавив форму загрузки после формы, в которой находятся остальные элементы ввода.Затем я использую ссылку для доступа к полю файла (работает в Chrome, FF и Safari).Причина, по которой я помещаю форму после основной формы, а не просто добавляю ее в тело, состоит в том, что в модальном диалоговом окне пользовательского интерфейса jQuery, если форма 2 находится в теле, вы не можете получить к нему доступ из-за характера модального диалога (отключение событий за пределамимодальное диалоговое окно).

В IE я помещаю ввод файла формы 2 в форму 1, а затем с помощью события onChange перемещаю (добавляю) входной файл в форму 2, запускаю отправку и затем перемещаю ввод файла обратнотуда, где это было.Это немного "хакерски", но, кажется, работает довольно хорошо.

Answer 2

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