Téléchargement des données et fichiers sous une forme à l’aide d’Ajax ?

Question

Je suis à l'aide de jQuery et Ajax pour mes formulaires pour soumettre des données et des fichiers, mais je ne suis pas sûr de savoir comment envoyer des fichiers et des données dans un formulaire?

Je fais presque la même chose avec les deux méthodes, mais la façon dont les données sont rassemblées dans un tableau est différent, l'utilisation des données .serialize(); , mais l'utilisation des fichiers = new FormData($(this)[0]);

Est-il possible de combiner les deux méthodes pour être en mesure de télécharger des fichiers et des données dans un formulaire via Ajax?

Les données de jQuery, Ajax et html

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

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

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

    return false;
});

<form id="data" method="post">
    <input type="text" name="first" value="Bob" />
    <input type="text" name="middle" value="James" />
    <input type="text" name="last" value="Smith" />
    <button>Submit</button>
</form>

Les fichiers jQuery, Ajax et html

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

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

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

    return false;
});

<form id="files" method="post" enctype="multipart/form-data">
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Comment puis-je combiner les ci-dessus afin que je puisse envoyer des données et des fichiers dans une forme via Ajax?

Mon objectif est d'être en mesure d'envoyer l'ensemble de ce formulaire dans un poste avec l'Ajax, est-il 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" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

Answer 1

Le problème que j’ai eu utilisait l’identificateur jQuery mal.

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

PHP + HTML

jQuery + Ajax

Answer 2

Ou plus court :