FormData est vide lors de l'utilisation de jQuery ajax()

J'essaie d'envoyer le formulaire avec le fichier avec jQuery.ajax. Google dit que je devrais utiliser FormData qui sera automatiquement encode le fichier et tous les intrants de la un objet qui je peux envoyer via XHR.

Bien, le FormData objet est vide. Elle est vide dans le débogueur et sur le côté serveur. Je ne trouve pas l'erreur. Voici le code. Le navigateur est Firefox 27.

<form method="post" action="" enctype="multipart/form-data" id="generate_params">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="action" value="AJAX_BANNERS_GENERATE">
</form>

<div>
    <p>
        <label>
            Image: <input type="file" name="bg_image[]" form="generate_params" required>
        </label>
    </p>
</div>

<input type="submit" form="generate_params">

<script>
    $(document).ready(function () {
        $("#generate_params").submit(function (e) {
            var data = new FormData(this);

            $.ajax({
                data: data,
                method: "POST",
                success: function (url) {
                    alert("ok");
                },
                cache: false,
                contentType: false,
                processData: false
            });

            e.preventDefault();
            return false;
        });
    });
</script>

Dans Firebug sur la Network dans l'onglet Params l'article, je vois la ligne:

[object FormData]: "undefined"? Sérieusement?

La chose stupide que je ne peux même pas envoyer FormData objet créé à partir de zéro. Comme ce

var data = new FormData();
data.append("test", {value: 0}); //still empty

OriginalL'auteur efpies | 2014-03-17

8

S'est avéré, j'utilise jQuery 1.8.1 qui ne prend pas en charge FormData. Bibliothèque mise à jour a résolu le problème.

OriginalL'auteur efpies
3

Voici Comment j'allais le faire:
1. Ouverture et de Fermeture Form balise doit envelopper tous les fichiers d'entrée!
2. e.preventDefault(); devrait être au début de la fonction, pour une meilleure pratique.
JS:
```
$("#generate_params").submit(function(e) {
    e.preventDefault();

    if( window.FormData !== undefined ) 
         //make sure that we can use FormData ie>9, chrome > 7, opera > 12 safari >5, android > 3  gecko mobile > 2, opera mobile >12 <- wil support XHR too
    {

        var formData = new FormData(this);
        //you can append aditional values:
        // formData.append("be",logmebehave);
        $.ajax({
            url: 'filesend.php',  //Path to the server script that process the data
            type: 'POST',
            data: formData,
            xhr: function() {  },
            success: function(response){},
            //Options to tell jQuery not to process data or worry about content-type.
            cache: false,
            contentType: false,
            processData: false
         });
    } else {

       //Fallback

    }

    return false;
});
```
FormData wil support multi upload de fichier.

Ajouter à votre Formulaire balise de l'attribut:

enctype="multipart/form-data"

Devrait fonctionner à merveille!

NOTE: Vous pouvez trouver que les FICHIERS de tableau est vide sur le côté serveur de la page - Dans ce cas, vous devez vous assurer que votre configuration de serveur permet l'upload de fichiers, la limite de taille de fichier de téléchargement est assez, l'heure
est assez etc....

La meilleure façon de commencer est de faire en sorte que les uploads de fichier est autorisé, puis de le tester avec de très
des petits fichiers afin d'être sûr que tout dans votre code est OK.

au lieu de var formData = new FormData($('#generate_params')[0]); vous pouvez écrire var formData = new FormData(this);. 'ce' est la forme actuelle de l'intérieur du gestionnaire de soumission.
la journalisation de la nouvelle FormData me donne un objet vide, même si $('#generate_params')[0] me montre la forme de l'objet. Des idées?

OriginalL'auteur Shlomi Hassid

Vous devez vous connecter pour publier un commentaire.