Альтернатива форме загрузки Ajax, вложенной в другую форму

Question

У меня есть HTML-форма для редактирования информации о человеке в системе баз данных, которую я имею на своем рабочем месте. Часть формы позволяет пользователю загрузить фотографию человека. Тем не менее, это доставляет мне проблемы, потому что я пытаюсь сделать форму более Ajax-y, позволяя пользователю загрузить изображение и увидеть его успешно загруженным, прежде чем они предоставят данные этого человека для сохранения. Часть, которая доставляет мне неприятности, заключается в том, что она требует вложенной формы (то есть формы загрузки внутри формы сведений), например:

<form name="details">
    <input name="detail1">
    <input name="detail2">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
    <input type="submit">
</form>

Я надеюсь заставить его работать так, чтобы пользователь заполнил детали формы, выбрал изображение и нажал кнопку «Загрузить», а затем произвел обновление AJAX при загрузке файла, чтобы они можно увидеть картинку перед тем, как нажать кнопку «Отправить».

Есть ли хороший способ, чтобы форма загрузки находилась "внутри" формы сведений (по крайней мере, на странице), но не была вложена в форму сведений в HTML?

Answer 1

Вы не можете иметь формы, вложенные друг в друга в допустимом HTML. Кроме того, загрузка файлов через объекты XMLHTTPRequest (наиболее распространенная техника AJAX) не работает в большинстве браузеров.

Однако еще не все потеряно. Для загрузки AJAX вам потребуется использовать IFRAME, как показано здесь: http://www.webtoolkit.info/ajax-file-upload.html

Подход, который я бы предложил для формы, - разделить ее на три form элемента. У вас будет форма, содержащая поля перед формой загрузки, форма загрузки и форма, которая содержит поля после формы загрузки. Первая форма не будет иметь кнопки отправки. Поля в первой форме дублируются в третьей форме как скрытые входные данные. При нажатии кнопки отправки последней формы запускается некоторый javascript, который будет копировать данные поля из первой формы в третью, поэтому он будет отправлен с последней формой.

Например, ваш HTML может выглядеть так:

<form name="details1">
    <input id="fake_detail1" name="detail1" type="text"/>
    <input id="fake_detail2" name="detail2" type="text"/>
</form>
<form name="pictureupload">
   <input type="file" name="pic">
   <input type="submit" name="upload" value="Upload">
</form>
<form name="details2">
    <input id="detail1" name="detail1" type="hidden"/>
    <input id="detail2" name="detail2" type="hidden"/>
    <input id="detail3" name="detail3" type="text"/>
    <input type="submit">
</form>

Answer 2

Вы можете разместить «вложенную» форму в другом месте на странице и показывать ее только тогда, когда пользователь нажимает кнопку «Загрузить изображение ...».

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

<div id="nestedform">
    <form name="pictureupload">
        <input type="file" name="pic">
        <input type="submit" name="upload" value="Upload">
    </form>
</div>

<div id="mainform">
<form name="details">
    <input name="detail1">
    <input name="detail2">
     <a href="#" onclick="Code to pop up the nested form">Upload Picture...</a>
    <input type="submit">
</form>
</div>