Le téléchargement de l'image en AJAX, ne peuvent pas utiliser la méthode de serialize() en jQuery?

J'ai trouvé que le téléchargement de l'image avec l'AJAX ne semble pas travailler avec plusieurs parties, comme spécifié dans la forme, parce que mon code pour vérifier si il est multipart() ne fonctionne jamais (en Java);

if (context.isMultiPart() 
{
    System.out.println("received Multipart data");  
}
else
{
    System.out.println("not multipart data!"); /* my code always prints this message in the upload handler uploadPost() */
}

J'ai ce formulaire html:

<div class="title"><label>Upload picture!</label></div>

<form method="post" id="imageUploadForm" enctype="multipart/form-data" action="/uploadPost">
    Please specify file to upload: <input type="file" name="upfile"><br />
    <input type="submit" value="submit" id="submitButton">
</form>

<div id="imagedisplay">

</div>

et voici mon code ajax qui envoie l'image pour la télécharger gestionnaire à l'adresse /uploadPost. Le uploadPost() dans mon code Java détermine d'abord si le téléchargement en plusieurs parties ou non, cependant, il semble que l'ajax ne pas envoyer l'image en plusieurs parties. Est-ce parce que j'utilise du jQuery serialize() la méthode sur la forme?

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
      <script>
        $(document).ready(function() {
            $('#imageUploadForm').submit(function(evt) {

                var formData = $('#imageUploadForm').serialize();
                $.post('/uploadPost', formData, uploadResults);
                evt.preventDefault();
            });

            //display the uploaded image on the same page
            function uploadResults(data) {
                    $('#imagedisplay').html("<img src=" + data.url + "" + data.name + ">");
                }  //end of uploadResults
        });  //end of ready
        </script>

OriginalL'auteur TonyGW | 2014-06-17

  1. 22

    Évolution de la fonction serialize() le code suivant fonctionne pour moi:

    $('#imageUploadForm').submit(function(evt) {
                evt.preventDefault();

                var formData = new FormData(this);

                $.ajax({
                type: 'POST',
                url: $(this).attr('action'),
                data:formData,
                cache:false,
                contentType: false,
                processData: false,
                success: function(data) {
                    $('#imagedisplay').html("<img src=" + data.url + "" + data.name + ">");
                },
                error: function(data) {
                    $('#imagedisplay').html("<h2>this file type is not supported</h2>");
                }
                });
            });
    a travaillé comme un charme. merci. J'ai passé d'innombrables heures avant, j'ai trouvé votre réponse. merci

    OriginalL'auteur TonyGW

  2. 1

    Vous pouvez faire usage de Formdata() , DOC API

    Le code sera similaire à la réponse donnée à la question existante Un Débordement De Pile Lien

    OriginalL'auteur Jayaram