Как отправить HTML-форму с файлом без перезагрузки страницы?

Question

[Павел Кизернис]

На jQuery Ajax'ом через serialize() не выходит, да и как я понял - нельзя.

Есть ли смысл использовать FormData?
Насколько я понял, он не очень хорошо поддерживается браузерами... Может есть на него костыли для неподдерживаемых браузеров?

Есть еще кроссбраузерные варианты?
Что-то слышал про метод с iframe, но так и не понял до конца, где должен быть этот iframe?

P.S. Кстати, поправьте меня, если я не прав: файл нельзя отправить методом get, верно?

Answer 1

[Виталий Инчин ☢]

В гугле забанили? ©Народная мудрость

Дави сюда

Но такой вариант пройдет только с IE9+.

Что-то слышал про метод с iframe, но так и не понял до конца, где должен быть этот iframe?

Пофантазирую:

• Берем iframe, кладем на страницу, скрываем
  
• Во фрейме форма
  
• При выборе файла в видимой форме на главной странице, подменяем данные в форме, что внутри фрейма, отправляем ее (onsubmit).
  
• Profit!
  

-

P.S. Кстати, поправьте меня, если я не прав: файл нельзя отправить методом get, верно?

В теории - можно, но только вес отправляемых данных будет куда больше, так как GET кодирует их по своему, да и кол-во символов в итоге не должно превышать 255.

Answer 2

[ingwar4ik]

<form id="Form">
    <input type="file" />
    <input type="submit" value="Send" id="buttonSubmit">
</form>

$(document).ready(function () {
		$("#buttonSubmit").bind("click", function (event) {
			$('#Form').submit();
			return false;
		});

		$('#Form').submit(function(e) {
		    var formData = new FormData(this);
		    $.ajax({
		        type:'POST',
		        url: '/url',
		        data:formData,
		        cache:false,
		        contentType: false,
		        processData: false,
		        success:function(data, status){

		        },
			      error: function (jqXHR, exception) {

			      }
		    });
		    e.preventDefault();
		});
});

Comments

[Павел Кизернис]

какие браузеры не поддержат такой способ?

[ingwar4ik]

Павел Кизернис: до ie9 не работает

Answer 3

[GoodProject]

Создание AJAX форм обратной связи на сайте

Comments

[Павел Кизернис]

для формы с файлом этот вариант не работает )