Comment utiliser Ajax pour télécharger des données et des fichiers en même temps ?

Question

J'utilise jQuery et Ajax pour soumettre des données et des fichiers, mais je ne sais pas comment envoyer à la fois des données et des fichiers sous un seul formulaire ?

J'utilise actuellement les deux méthodes presque de la même manière, mais la manière de collecter les données dans un tableau est différente, les données utilisent .serialize(); ;= new FormData($(this)[0]);

Est-il possible de combiner ces deux méthodes pour télécharger des fichiers et des données sous une seule forme via Ajax ?

Données jQuery, Ajax et html

$("form#data").submit(function(){

    var formData = $(this).serialize();

    $.ajax({
        URL : window.location.pathname,
        tapez : 'POST',
        données : formData,
        asynchrone : faux,
        succès : fonction (données) {
            alerte (données)
        },
        cache : faux,
        contentType : faux,
        ProcessData : faux
    });

    renvoie faux ;
});

<id du formulaire="données" méthode="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <bouton>Envoyer</bouton>
</form>

Documentation jQuery, Ajax et html

$("form#files").submit(function(){

    var formData = new FormData($(this)[0]);

    $.ajax({
        URL : window.location.pathname,
        tapez : 'POST',
        données : formData,
        asynchrone : faux,
        succès : fonction (données) {
            alerte (données)
        },
        cache : faux,
        contentType : faux,
        ProcessData : faux
    });

    renvoie faux ;
});

<form id="files" method="post" enctype="multipart/form-data">
    <nom d'entrée="image" type="fichier" />
    <bouton>Envoyer</bouton>
</form>

Comment puis-je combiner ce qui précède afin de pouvoir envoyer des données et des fichiers sous un seul formulaire via Ajax ?

Mon objectif est de pouvoir envoyer tous ces formulaires ensemble via Ajax, est-ce possible ?

<form id="datafiles" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <nom d'entrée="image" type="fichier" />
    <bouton>提交</bouton>
</form>

Answer 1

Une autre option consiste à utiliser une iframe et à y définir la cible du formulaire.

Vous pouvez essayer ceci (il utilise jQuery) :

function ajax_form($form, on_complete)
{
    var iframe;

    if (!$form.attr('target'))
    {
        //为表单创建一个唯一的iframe
        iframe = $("<iframe></iframe>").attr('name', 'ajax_form_' + Math.floor(Math.random() * 999999)).hide().appendTo($('body'));
        $form.attr('target', iframe.attr('name'));
    }

    if (on_complete)
    {
        iframe = iframe || $('iframe[name="' + $form.attr('target') + '"]');
        iframe.load(function ()
        {
            //获取服务器响应
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

Cela fonctionne dans tous les navigateurs et vous n'avez pas besoin de sérialiser ou de préparer des données. Un inconvénient est que vous ne pouvez pas suivre les progrès.

De plus, au moins pour Chrome, la requête n'apparaît pas sous l'onglet "xhr" dans les outils de développement, mais sous "doc".

Answer 2

Le problème que j'ai eu était d'utiliser le mauvais identifiant jQuery.

Vous pouvez utiliser un formulaire utilisant ajax pour télécharger des données et des fichiers.

PHP + HTML

<?php

print_r($_POST);
print_r($_FILES);
?>

<form id="data" method="post" enctype="multipart/form-data">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <input name="image" type="file" />
    <button>提交</button>
</form>

jQuery + Ajax

$("form#data").submit(function(e) {
    e.preventDefault();    
    var formData = new FormData(this);

    $.ajax({
        url: window.location.pathname,
        type: 'POST',
        data: formData,
        success: function (data) {
            alert(data)
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

Version simplifiée

$("form#data").submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);    

    $.post($(this).attr("action"), formData, function(data) {
        alert(data);
    });
});