Как сделать загрузку файла с помощью сериализации jquery

Итак, у меня есть форма, и я передаю форму через ajax, используя функцию сериализации jquery

        serialized = $(Forms).serialize();

        $.ajax({

        type        : "POST",
        cache   : false,
        url     : "blah",
        data        : serialized,
        success: function(data) {

        }

но тогда, если форма имеет поле <input type="file">.... как передать файл в форму с помощью этого метода сериализации ajax... печать $_FILES ничего не выводит

Ответы

Ответ 1

Файл не может быть загружен с помощью AJAX, потому что вы не можете получить доступ к содержимому файла, хранящегося на клиентском компьютере, и отправить его в запросе с помощью javascript. Одним из способов достижения этого является использование скрытых фреймов. Там есть приятный плагин формы jquery, который позволяет AJAXify ваши формы и поддерживает загрузка файлов. Поэтому, используя этот плагин, ваш код будет выглядеть следующим образом:

$(function() {
    $('#ifoftheform').ajaxForm(function(result) {
        alert('the form was successfully processed');
    });
});

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

Ответ 3

Он работает для любого типа формы

$(document).on("submit", "form", function(event)
{
    event.preventDefault();

    var url=$(this).attr("action");
    $.ajax({
        url: url,
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        

});

Ответ 4

Вы можете загружать файлы через AJAX с помощью метода FormData. Хотя IE7,8 и 9 не поддерживают функциональные возможности FormData.

$.ajax({
    url: "ajax.php", 
    type: "POST",             
    data: new FormData('form'),
    contentType: false,       
    cache: false,             
    processData:false, 
    success: function(data) {
        $("#response").html(data);
    }
});

Ответ 5

В HTML5 представлен класс FormData, который можно использовать для загрузки файлов с помощью ajax.

Поддержка FormData начинается со следующих версий настольных браузеров. IE 10+, Firefox 4.0+, Chrome 7+, Safari 5+, Opera 12 +

https://developer.mozilla.org/en/docs/Web/API/FormData/FormData