He encontrado que la carga de imágenes con AJAX no parecen trabajar con varias partes como se especifica en el formulario, porque mi código para comprobar si es multiparte() nunca funciona (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() */
}

Tengo este formulario 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>

y la siguiente es mi código de ajax que envía la imagen a la hora de cargar controlador en la dirección /uploadPost. El uploadPost() método en mi código de Java determina en primer lugar si la carga es concatenados o no, sin embargo, parece que el ajax no enviar la imagen como de varias partes. ¿Es debido a que el uso de jQuery, serialize() método en el formulario?

<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>
InformationsquelleAutor TonyGW | 2014-06-17

2 Comentarios

  1. 26

    Cambiando de serialize() el siguiente código me funciona:

    $('#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>");
                    }
                    });
                });
    • trabajó como un encanto. gracias. Pasé incontables horas antes de encontrar su respuesta. gracias
    • Gracias a usted salvó mi día!

Dejar respuesta

Please enter your comment!
Please enter your name here