Отправка multipart / formdata с помощью jQuery.ajax

Я только что создал эту функцию на основе некоторой информации, которую я прочитал.

Используйте его, используя .serialize(), вместо этого просто поставьте .serializefiles();.
Работа здесь в моих тестах.

//USAGE: $("#form").serializefiles();
(function($) {
$.fn.serializefiles = function() {
    var obj = $(this);
    /* ADD FILE TO PARAM AJAX */
    var formData = new FormData();
    $.each($(obj).find("input[type='file']"), function(i, tag) {
        $.each($(tag)[0].files, function(i, file) {
            formData.append(tag.name, file);
        });
    });
    var params = $(obj).serializeArray();
    $.each(params, function (i, val) {
        formData.append(val.name, val.value);
    });
    return formData;
};
})(jQuery);

Просто хотел добавить немного к Рафаэлю отличный ответ. Здесь, как заставить PHP создавать те же $_FILES, независимо от того, используете ли вы JavaScript для отправки.

HTML-форма:

<form enctype="multipart/form-data" action="/test.php" 
method="post" class="putImages">
   <input name="media[]" type="file" multiple/>
   <input class="button" type="submit" alt="Upload" value="Upload" />
</form>

PHP создает этот $_FILES, если он представлен без JavaScript:

Array
(
    [media] => Array
        (
            [name] => Array
                (
                    [0] => Galata_Tower.jpg
                    [1] => 518f.jpg
                )

            [type] => Array
                (
                    [0] => image/jpeg
                    [1] => image/jpeg
                )

            [tmp_name] => Array
                (
                    [0] => /tmp/phpIQaOYo
                    [1] => /tmp/phpJQaOYo
                )

            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                )

            [size] => Array
                (
                    [0] => 258004
                    [1] => 127884
                )

        )

)

Если вы делаете прогрессивное усовершенствование, используйте Raphael JS для отправки файлов...

var data = new FormData($('input[name^="media"]'));     
jQuery.each($('input[name^="media"]')[0].files, function(i, file) {
    data.append(i, file);
});

$.ajax({
    type: ppiFormMethod,
    data: data,
    url: ppiFormActionURL,
    cache: false,
    contentType: false,
    processData: false,
    success: function(data){
        alert(data);
    }
});

... вот как выглядит массив PHP $_FILES, после использования этого JavaScript для отправки:

Array
(
    [0] => Array
        (
            [name] => Galata_Tower.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpAQaOYo
            [error] => 0
            [size] => 258004
        )

    [1] => Array
        (
            [name] => 518f.jpg
            [type] => image/jpeg
            [tmp_name] => /tmp/phpBQaOYo
            [error] => 0
            [size] => 127884
        )

)

Это хороший массив, и на самом деле некоторые люди преобразуют $_FILES в, но я считаю полезным работать с тем же $_FILES, независимо от того, был ли JavaScript использован для отправки. Итак, вот некоторые незначительные изменения в JS:

// match anything not a [ or ]
regexp = /^[^[\]]+/;
var fileInput = $('.putImages input[type="file"]');
var fileInputName = regexp.exec( fileInput.attr('name') );

// make files available
var data = new FormData();
jQuery.each($(fileInput)[0].files, function(i, file) {
    data.append(fileInputName+'['+i+']', file);
});

(14 апреля 2017 г.) edit: я удалил элемент формы из конструктора FormData(), который исправил этот код в Safari.)

Этот код выполняет две вещи.

• Автоматически извлекает атрибут имени input, что делает HTML более удобным. Теперь, пока form имеет класс putImages, все остальное заботится автоматически. То есть input не должно иметь специального имени.
• Формат массива, который представляет обычный HTML-код, воссоздается JavaScript в строке data.append. Обратите внимание на скобки.

С этими изменениями отправка с помощью JavaScript теперь производит точно такой же массив $_FILES, что и с простым HTML.

Посмотрите на мой код, он выполняет эту работу для меня

$( '#formId' )
  .submit( function( e ) {
    $.ajax( {
      url: 'FormSubmitUrl',
      type: 'POST',
      data: new FormData( this ),
      processData: false,
      contentType: false
    } );
    e.preventDefault();
  } );

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

$('#my-form').submit( function(e) {
    e.preventDefault();

    var data = new FormData(this); // <-- 'this' is your form element

    $.ajax({
            url: '/my_URL/',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            type: 'POST',     
            success: function(data){
            ...

Devin Venable answer был близок к тому, что я хотел, но я хотел, чтобы он работал с несколькими формами и использовал действие, уже указанное в форме, чтобы каждый файл попадет в нужное место.

Я также хотел использовать метод jQuery on(), чтобы избежать использования .ready().

Это привело меня к следующему: (замените formSelector на ваш селектор jQuery)

$(document).on('submit', formSelecter, function( e ) {
        e.preventDefault();
    $.ajax( {
        url: $(this).attr('action'),
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false
    }).done(function( data ) {
        //do stuff with the data you got back.
    });

});

Класс FormData работает, однако в iOS Safari (по крайней мере, на iPhone) я не смог использовать решение Рафаэля Швайкерта как есть.

Mozilla Dev имеет приятную страницу при управлении объектами FormData.

Итак, добавьте пустую форму где-нибудь на вашей странице, указав enctype:

<form enctype="multipart/form-data" method="post" name="fileinfo" id="fileinfo"></form>

Затем создайте объект FormData как:

var data = new FormData($("#fileinfo"));

и действуйте как код Рафаэля.

Все вышеприведенные решения выглядят хорошо и элегантно, но объект FormData() не ожидает какого-либо параметра, но использует append() после его создания, как то, что написано выше:

formData.append(val.name, val.value);

Старые версии IE не поддерживают FormData (полный список поддержки браузера для FormData находится здесь: https://developer.mozilla.org/en-US/docs/Web/API/FormData).

Либо вы можете использовать плагин jquery (для ex, http://malsup.com/jquery/form/#code-samples), либо вы можете использовать решение на основе IFrame для отправки многостраничной формы данные через ajax: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript

Одна из моих проблем, с которой я столкнулся сегодня, думаю, стоит обратить внимание на эту проблему: если URL-адрес для вызова ajax перенаправлен, заголовок для типа контента: "multipart/form-data" может быть потерян.

Например, я отправлял сообщение http://server.com/context?param=x

На вкладке "Сеть" в Chrome я увидел правильный многостраничный заголовок для этого запроса, но затем перенаправил 302 на http://server.com/context/?param=x (обратите внимание на слэш после контекста)

Во время перенаправления многочастный заголовок был потерян. Убедитесь, что запросы не перенаправляются, если эти решения не работают для вас.

• Получить объект формы с помощью jquery- > $( "# id" ) [0]
• data = new FormData ($ ( "# id" ) [0]);
• ok, данные - ваши пожелания.

В качестве альтернативы AJAX вы можете добавить скрытый iframe в свой документ, скопировать туда свою форму и опубликовать ее (чтобы на вашей видимой странице не было перенаправления). Я думаю, вы могли бы удалить iframe впоследствии.

(HTML и JS - это технологии для хакеров, а не для программистов. Вам придется вырваться из этого... Это было... Бог знает, сколько лет исправления и "развития" JS и HTML, и вы все еще не могу сделать что-то настолько простое, не используя внешние библиотеки. Мне это надоело (я знаю о HTML5, просто этого недостаточно и не широко поддерживается))