Альтернатива Ajax загружает форму, вложенную в другой форме
У меня есть 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>
Путем я надеюсь сделать, работать случается так, что пользователь заполнил бы детали формы, выберите изображение и нажмите кнопку "Upload", затем сделайте обновление Ajax, когда файл загружается так, чтобы они видели изображение прежде, чем нажать заключительную кнопку "Submit".
Существует ли хороший способ иметь форму загрузки быть "в" форме деталей (по крайней мере по внешности на странице), но не вложен в форме деталей в HTML?
2 ответа
Запрещается размещать формы друг в друге в допустимом HTML. Кроме того, загрузка файлов через объекты XMLHTTPRequest (наиболее распространенный метод AJAX) не работает в большинстве браузеров.
Однако еще не все потеряно. Для загрузки AJAX вам нужно будет использовать IFRAME, как представлено здесь: http://www.webtoolkit.info/ajax-file-upload.html
Подход, который я предлагаю для формы, заключается в том, чтобы разделите его на три элемента формы . У вас будет форма, содержащая поля перед формой загрузки, форма загрузки и форма, содержащая поля после формы загрузки. В первой форме не будет кнопки отправки. Поля в первой форме дублируются в третьей форме как скрытые поля ввода. Когда нажимается кнопка отправки последней формы, запускается некоторый 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>
Вы можете разместить «вложенную» форму в другом месте на странице и показывать ее только тогда, когда пользователь нажимает на кнопку «Загрузить изображение ...».
Вложенная форма может быть изначально невидимой. Есть несколько очень хороших всплывающих окон, которые позволяют отображать вложенную форму поверх внешней формы и позволяют пользователю загружать вложенную форму независимо.
<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>