Télécharger à la fois des données et des fichiers sous un seul formulaire en utilisant Ajax?

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

Actuellement, je fais presque la même chose avec les deux méthodes, mais la façon dont les données sont collectées dans un tableau est différente, les données utilisent .serialize();mais les fichiers utilisent= new FormData($(this)[0]);

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

Données 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>

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 ce qui précède afin que je puisse envoyer des données et des fichiers sous une forme via Ajax?

Mon objectif est de pouvoir envoyer tout ce formulaire en un seul message avec 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" />
    <input name="image" type="file" />
    <button>Submit</button>
</form>

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

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

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>Submit</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 courte

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

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

une autre option consiste à utiliser un 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'))
    {
        //create a unique iframe for the form
        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 ()
        {
            //get the server response
            var response = iframe.contents().find('body').text();
            on_complete(response);
        });
    }
}

cela fonctionne bien avec tous les navigateurs, vous n'avez pas besoin de sérialiser ou de préparer les données. un inconvénient est que vous ne pouvez pas suivre les progrès.

aussi, au moins pour Chrome, la requête n'apparaîtra pas dans l'onglet "xhr" des outils de développement mais sous "doc"

J'avais ce même problème dans ASP.Net MVC avec HttpPostedFilebase et au lieu d'utiliser le formulaire sur Soumettre, je devais utiliser le bouton sur le clic où je devais faire des choses et puis si tout allait bien le formulaire de soumission, voici comment je l'ai fait fonctionner

$(".submitbtn").on("click", function(e) {

    var form = $("#Form");

    // you can't pass Jquery form it has to be javascript form object
    var formData = new FormData(form[0]);

    //if you only need to upload files then 
    //Grab the File upload control and append each file manually to FormData
    //var files = form.find("#fileupload")[0].files;

    //$.each(files, function() {
    //  var file = $(this);
    //  formData.append(file[0].name, file[0]);
    //});

    if ($(form).valid()) {
        $.ajax({
            type: "POST",
            url: $(form).prop("action"),
            //dataType: 'json', //not sure but works for me without this
            data: formData,
            contentType: false, //this is requireded please see answers above
            processData: false, //this is requireded please see answers above
            //cache: false, //not sure but works for me without this
            error   : ErrorHandler,
            success : successHandler
        });
    }
});

cela remplira correctement votre modèle MVC, assurez-vous que dans votre modèle, la propriété de HttpPostedFileBase [] a le même nom que le nom du contrôle d'entrée en html, c'est-à-dire

<input id="fileupload" type="file" name="UploadedFiles" multiple>

public class MyViewModel
{
    public HttpPostedFileBase[] UploadedFiles { get; set; }
}

Ou plus court:

$("form#data").submit(function() {
    var formData = new FormData(this);
    $.post($(this).attr("action"), formData, function() {
        // success    
    });
    return false;
});

Pour moi, ça n'a pas marché sans enctype: 'multipart/form-data' champ dans la demande Ajax. J'espère que cela aide quelqu'un qui est coincé dans un problème similaire.

Même si le enctype était déjà défini dans l'attribut form , pour une raison quelconque, la requête Ajax n'a pas identifié automatiquement la enctypedéclaration sans explicite (jQuery 3.3.1).

// Tested, this works for me (jQuery 3.3.1)

fileUploadForm.submit(function (e) {   
    e.preventDefault();
    $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            enctype: 'multipart/form-data',
            data: new FormData(this),
            processData: false,
            contentType: false,
            success: function (data) {
                console.log('Thank God it worked!');
            }
        }
    );
});

// enctype field was set in the form but Ajax request didn't set it by default.

<form action="process/file-upload" enctype="multipart/form-data" method="post" >

     <input type="file" name="input-file" accept="text/plain" required> 
     ...
</form>

Comme d'autres mentionnés ci-dessus, veuillez également porter une attention particulière aux champs contentTypeet processData.

Pour moi, suivre le travail de code

$(function () {
    debugger;
    document.getElementById("FormId").addEventListener("submit", function (e) {
        debugger;
        if (ValidDateFrom()) { // Check Validation 
            var form = e.target;
            if (form.getAttribute("enctype") === "multipart/form-data") {
                debugger;
                if (form.dataset.ajax) {
                    e.preventDefault();
                    e.stopImmediatePropagation();
                    var xhr = new XMLHttpRequest();
                    xhr.open(form.method, form.action);
                    xhr.onreadystatechange = function (result) {
                        debugger;
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            debugger;
                            var responseData = JSON.parse(xhr.responseText);
                            SuccessMethod(responseData); // Redirect to your Success method 
                        }
                    };
                    xhr.send(new FormData(form));
                }
            }
        }
    }, true);
});

Dans votre méthode de publication d'action, transmettez le paramètre en tant que HttpPostedFileBase UploadFile et assurez-vous que l'entrée de votre fichier est identique à celle mentionnée dans votre paramètre de la méthode d'action. Cela devrait également fonctionner avec le formulaire AJAX Begin.

Rappelez-vous ici que votre formulaire AJAX BEGIN ne fonctionnera pas ici puisque vous effectuez votre appel de poste défini dans le code mentionné ci-dessus et vous pouvez référencer votre méthode dans le code selon l'exigence

Je sais que je réponds tard mais c'est ce qui a fonctionné pour moi

Une manière simple mais plus efficace:
new FormData()est elle-même comme un conteneur (ou un sac). Vous pouvez mettre tout attr ou fichier en lui-même. La seule chose dont vous aurez besoin pour ajouter attribute, file, fileNamepar exemple:

let formData = new FormData()
formData.append('input', input.files[0], input.files[0].name)

et il suffit de le passer dans la demande AJAX. Par exemple:

    let formData = new FormData()
    var d = $('#fileid')[0].files[0]

    formData.append('fileid', d);
    formData.append('inputname', value);

    $.ajax({
        url: '/yourroute',
        method: 'POST',
        contentType: false,
        processData: false,
        data: formData,
        success: function(res){
            console.log('successfully')
        },
        error: function(){
            console.log('error')
        }
    })

Vous pouvez ajouter n nombre de fichiers ou de données avec FormData.

et si vous faites une demande AJAX à partir du fichier Script.js vers le fichier Route dans Node.js, méfiez-vous de l'utilisation
req.bodypour accéder aux données (par exemple, le texte)
req.filespour accéder au fichier (par exemple, l'image, la vidéo, etc.)

Dans mon cas, j'ai dû faire une demande POST, qui contenait des informations envoyées via l'en-tête, ainsi qu'un fichier envoyé à l'aide d'un objet FormData.

Je l'ai fait fonctionner en utilisant une combinaison de certaines des réponses ici, donc essentiellement ce qui a fini par fonctionner était d'avoir ces cinq lignes dans ma demande Ajax:

 contentType: "application/octet-stream",
 enctype: 'multipart/form-data',
 contentType: false,
 processData: false,
 data: formData,

Où formData était une variable créée comme ceci:

 var file = document.getElementById('uploadedFile').files[0];
 var form = $('form')[0];
 var formData = new FormData(form);
 formData.append("File", file);

<form id="form" method="post" action="otherpage.php" 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 type='button' id='submit_btn'>Submit</button>
</form>

<script>
$(document).on("click", "#submit_btn", function (e) {
    //Prevent Instant Click  
    e.preventDefault();
    // Create an FormData object 
    var formData = $("#form").submit(function (e) {
        return;
    });
    //formData[0] contain form data only 
    // You can directly make object via using form id but it require all ajax operation inside $("form").submit(<!-- Ajax Here   -->)
    var formData = new FormData(formData[0]);
    $.ajax({
        url: $('#form').attr('action'),
        type: 'POST',
        data: formData,
        success: function (response) {
            console.log(response);
        },
        contentType: false,
        processData: false,
        cache: false
    });
    return false;
});
</script>

///// otherpage.php

<?php
    print_r($_FILES);
?>