Надсилання багаточастинних / форматних даних за допомогою jQuery.ajax

У мене виникла проблема з надсиланням файлу на сервер PHP-скрипт за допомогою функції aqx jQuery. Можна отримати список файлів за допомогою, $('#fileinput').attr('files')але як можна надіслати ці дані на сервер? Отриманий масив ( $_POST) на сервері php-скрипту дорівнює 0 ( NULL) при використанні файлового вводу.

Я знаю, що це можливо (хоча я досі не знайшов жодного рішення jQuery, лише код Prototye ( http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html ) ).

Це здається порівняно новим, тому, будь ласка, не зазначайте, що завантаження файлів було б неможливим через XHR / Ajax, оскільки це, безумовно, працює.

Мені потрібна функціональність в Safari 5, FF та Chrome, це було б добре, але вони не є істотними.

Мій код на даний момент:

$.ajax({
    url: 'php/upload.php',
    data: $('#file').attr('files'),
    cache: false,
    contentType: 'multipart/form-data',
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

Починаючи з Safari 5 / Firefox 4, найпростіше використовувати FormDataклас:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

Отже, тепер у вас є FormDataоб'єкт, готовий до відправки разом з XMLHttpRequest.

jQuery.ajax({
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
});

Обов'язково потрібно встановити цей contentTypeпараметр false, змушуючи jQuery не додавати Content-Typeзаголовок для вас, інакше граничний рядок відсутній у ньому. Крім того, ви повинні залишити processDataпрапор встановленим на false, інакше jQuery спробує перетворити ваш файл FormDataу рядок, що не вдасться.

Тепер ви можете отримати файл у PHP за допомогою:

$_FILES['file-0']

(Є лише один файл, file-0якщо ви не вказали multipleатрибут на вводі файлу; в цьому випадку цифри збільшуватимуться з кожним файлом.)

Використання емуляції FormData для старих браузерів

var opts = {
    url: 'php/upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    type: 'POST', // For jQuery < 1.9
    success: function(data){
        alert(data);
    }
};
if(data.fake) {
    // Make sure no text encoding stuff is done by xhr
    opts.xhr = function() { var xhr = jQuery.ajaxSettings.xhr(); xhr.send = xhr.sendAsBinary; return xhr; }
    opts.contentType = "multipart/form-data; boundary="+data.boundary;
    opts.data = data.toString();
}
jQuery.ajax(opts);

Створіть FormData з наявної форми

Замість ітерації файлів вручну, об'єкт FormData також може бути створений із вмістом існуючого об'єкта форми:

var data = new FormData(jQuery('form')[0]);

Використовуйте рідний масив PHP замість лічильника

Просто назвіть елементи файлу однаково і закінчіть ім'я в дужках:

jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file[]', file);
});

$_FILES['file']Тоді буде масив, що містить поля для завантаження файлів для кожного завантаженого файлу. Я фактично рекомендую це над своїм початковим рішенням, оскільки це простіше повторити.

Просто хотів трохи додати чудову відповідь Рафаеля. Ось як змусити 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
                )

        )

)

Якщо ви робите прогресивне вдосконалення, використовуючи JS Raphael для подання файлів ...

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);
    }
});

... ось як $_FILESвиглядає масив PHP після використання цього 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 для подання. Отже, ось деякі незначні зміни до СВ:

// 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 редагувати: я видалив елемент форми з конструктора FormData () - який зафіксував цей код у Safari.)

Цей код робить дві речі.

1. inputАвтоматично отримує атрибут імені, що робить HTML більш ретельним. Тепер, поки formклас кладе PutImages, про все інше дбає автоматично. Тобто inputпотреба не має жодної спеціальної назви.
2. Формат масиву, який надсилає звичайний 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();
  } );

Я просто побудував цю функцію на основі деякої інформації, яку я прочитав.

Використовуйте його як використання .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);

Якщо ваша форма визначена у вашому 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){
            ...

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

Я також хотів використовувати метод 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.
    });

});

Сьогодні вам навіть не потрібна таблиця підтримки API для отримання jQuery :)

let result = fetch('url', {method: 'POST', body: new FormData(document.querySelector("#form"))})

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

У Mozilla Dev є приємна сторінка щодо маніпулювання об'єктами FormData .

Отже, додайте порожню форму десь на своїй сторінці, вказавши ентетип:

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

Потім створіть об’єкт FormData як:

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

і продовжуйте, як у коді Рафаеля .

Один готч, з яким я зіткнувся сьогодні, я думаю, варто звернути увагу на цю проблему: якщо URL-адресу для виклику ajax буде перенаправлено, то заголовок для типу content: 'multipart / form-data' може бути втрачений.

Наприклад, я публікував повідомлення на http://server.com/context?param=x

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

Під час переадресації багатопартійний заголовок був втрачений. Переконайтеся, що запити не переспрямовуються, якщо ці рішення не працюють для вас.

Всі рішення, наведені вище, виглядають добре і елегантно, але об'єкт FormData () не очікує жодного параметра, але використовує додавання () після його інстанції, як те, що було написано вище:

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

Якщо вхідний файл nameвказує на масив і прапори multiple, і ви розбираєте весь formз FormData, ітеративно append()вводити файли не потрібно . FormDataавтоматично обробляє декілька файлів.

$('#submit_1').on('click', function() {
  let data = new FormData($("#my_form")[0]);

  $.ajax({
    url: '/path/to/php_file',
    type: 'POST',
    data: data,
    processData: false,
    contentType: false,
    success: function(r) {
      console.log('success', r);
    },
    error: function(r) {
      console.log('error', r);
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="my_form">
  <input type="file" name="multi_img_file[]" id="multi_img_file" accept=".gif,.jpg,.jpeg,.png,.svg" multiple="multiple" />
  <button type="button" name="submit_1" id="submit_1">Not type='submit'</button>
</form>

Зауважте, що звичайний button type="button"використовується, а не type="submit". Це показує, що немає можливості використовувати submitдля отримання цієї функціональності.

Отриманий $_FILESзапис виглядає так у інструментах для розробників Chrome:

multi_img_file:
  error: (2) [0, 0]
  name: (2) ["pic1.jpg", "pic2.jpg"]
  size: (2) [1978036, 2446180]
  tmp_name: (2) ["/tmp/phphnrdPz", "/tmp/phpBrGSZN"]
  type: (2) ["image/jpeg", "image/jpeg"]

Примітка. Є випадки, коли деякі зображення завантажуються добре, коли вони завантажуються як єдиний файл, але вони виходять з ладу при завантаженні в набір декількох файлів. Симптом полягає в тому, що PHP повідомляє порожні $_POSTі $_FILESбез AJAX не видає помилок. Випуск відбувається з Chrome 75.0.3770.100 та PHP 7.0. Тільки, здається, трапляється з 1 із кількох десятків зображень у моєму тестовому наборі.

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

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

PHP

<?php 
    var_dump( $_FILES ); 
?>

jQuery та форма HTML

$( "#form" ).bind( "submit", function (e) {

    e.preventDefault();

    $.ajax({

        method: "post",
        url: "process.php",

        data: new FormData( $(this) ), // $(this) = formHTML element

        cache: false,

        /* upload */
        contentType: false,
        processData: false

    });

} )

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<form id="form" >
    File: <input type="file" name="upload" />
    <input type="submit" value="Submit" />
</form>

1. отримати об’єкт форми за допомогою jquery-> $ ("# id") [0]
2. data = новий FormData ($ ("# id") [0]);
3. добре, дані - це ваше бажання