servidor - subir multiples archivos jquery

¿Cómo subir archivos al servidor usando JSP/Servlet y Ajax?

Question

Estoy creando una aplicación web JSP / Servlet y me gustaría subir un archivo a un servlet mediante Ajax. ¿Cómo voy a hacer esto? Estoy usando jQuery.

Lo he hecho hasta ahora

<form class="upload-box">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error" />
    <input type="submit" id="upload-button" value="upload" />
</form>

Con este jQuery:

$(document).on("#upload-button", "click", function() {
    $.ajax({
        type: "POST",
        url: "/Upload",
        async: true,
        data: $(".upload-box").serialize(),
        contentType: "multipart/form-data",
        processData: false,
        success: function(msg) {
            alert("File has been uploaded successfully");
        },
        error:function(msg) {
            $("#upload-error").html("Couldn''t upload file");
        }
    });
});

Sin embargo, no parece enviar el contenido del archivo.

Answer 1

Este código funciona bien para mí:

$(''#fileUploader'').on(''change'', uploadFile);


function uploadFile(event)
 {
     event.stopPropagation(); 
     event.preventDefault(); 
     var files = event.target.files; 
     var data = new FormData();
     $.each(files, function(key, value)
     {
         data.append(key, value);
     });
     postFilesData(data); 
  }
 
function postFilesData(data)
 {
  $.ajax({
        url: ''yourUrl'',
        type: ''POST'',
        data: data,
        cache: false,
        dataType: ''json'',
        processData: false, 
        contentType: false, 
        success: function(data, textStatus, jqXHR)
        {
         //success
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            console.log(''ERRORS: '' + textStatus);
        }
     });
 }

<form method="POST" enctype="multipart/form-data">
 <input type="file" name="file" id="fileUploader"/>
</form>

Answer 2

El código de @ Monsif funciona bien si el formulario solo tiene entradas de tipo de archivo, si hay otras entradas además del tipo de archivo, entonces se pierden. Por lo tanto, en lugar de copiar los datos de cada formulario y anexarlos al objeto FormData, la forma original en sí misma se le puede dar al constructor.

En cuanto al código @ Monsif y https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/ post, saqué el siguiente código que trabajó para mi. Espero que ayude a alguien más.

<script type="text/javascript">
        var files = null; // when files input changes this will be initiliazed.
        $(function() {
            $(''#form2Submit'').on(''submit'', uploadFile);
    });

        function uploadFile(event) {
            event.stopPropagation();
            event.preventDefault();
            //var files = files;
            var form = document.getElementById(''form2Submit'');
            var data = new FormData(form);
            postFilesData(data);
}

        function postFilesData(data) {
            $.ajax({
                url :  ''yourUrl'',
                type : ''POST'',
                data : data,
                cache : false,
                dataType : ''json'',
                processData : false,
                contentType : false,
                success : function(data, textStatus, jqXHR) {
                    alert(data);
                },
                error : function(jqXHR, textStatus, errorThrown) {
                    alert(''ERRORS: '' + textStatus);
                }
            });
        }
</script>

El código html puede ser algo así como:

<form id ="form2Submit" action="yourUrl">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br>
<input id="fileSelect" name="fileSelect[]" type="file" multiple accept=".xml,txt">
<br>
  <input type="submit" value="Submit">
</form>

Answer 3

Este código funciona para mí.

Usado el archivo commons io.jar & commons upload.jar y el complemento de formulario jQuery

<script>
    $(function() {
        $(''#upload-form'').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn''t upload file");
            }
        });
    });
</script>

<form id="upload-form" class="upload-box" action="upload" method="POST" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

 boolean isMultipart = ServletFileUpload.isMultipartContent(request);

        if (isMultipart) {
            // Create a factory for disk-based file items
            FileItemFactory factory = new DiskFileItemFactory();

            // Create a new file upload handler
            ServletFileUpload upload = new ServletFileUpload(factory);

            try {
                // Parse the request
                List items = upload.parseRequest(request);
                Iterator iterator = items.iterator();
                while (iterator.hasNext()) {
                    FileItem item = (FileItem) iterator.next();
                    if (!item.isFormField()) {
                        String fileName = item.getName();    
                        String root = getServletContext().getRealPath("/");
                        File path = new File(root + "../../web/Images/uploads");
                        if (!path.exists()) {
                            boolean status = path.mkdirs();
                        }

                        File uploadedFile = new File(path + "/" + fileName);
                        System.out.println(uploadedFile.getAbsolutePath());
                        item.write(uploadedFile);
                    }
                }
            } catch (FileUploadException e) {
                e.printStackTrace();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }



enter code here

Answer 4

Hasta el punto, a partir de la versión 1 de XMLHttpRequest actual utilizada por jQuery, no es posible cargar archivos usando JavaScript a través de XMLHttpRequest . La solución común es permitir que JavaScript cree un <iframe> oculto y enviarlo en su lugar para que la impresión se cree que ocurre de forma asincrónica. Eso también es exactamente lo que hacen la mayoría de los complementos de carga de archivos de jQuery, como el complemento jQuery Form ( ejemplo aquí ).

Suponiendo que su JSP con el formulario HTML se reescribe de tal manera que no se rompa cuando el cliente tiene JS deshabilitado (como lo ha hecho ahora ...), como a continuación:

<form id="upload-form" class="upload-box" action="/Upload" method="post" enctype="multipart/form-data">
    <input type="file" id="file" name="file1" />
    <span id="upload-error" class="error">${uploadError}</span>
    <input type="submit" id="upload-button" value="upload" />
</form>

Entonces es con la ayuda del plugin jQuery Form solo una cuestión de

<script src="jquery.js"></script>
<script src="jquery.form.js"></script>
<script>
    $(function() {
        $(''#upload-form'').ajaxForm({
            success: function(msg) {
                alert("File has been uploaded successfully");
            },
            error: function(msg) {
                $("#upload-error").text("Couldn''t upload file");
            }
        });
    });
</script>

En cuanto al lado del servlet, no es necesario hacer nada especial aquí. Simplemente impleméntelo exactamente de la misma forma que lo haría cuando no utiliza Ajax: ¿Cómo subir archivos al servidor usando JSP / Servlet?

Solo necesitará una comprobación adicional en el servlet si el encabezado X-Requested-With es igual a XMLHttpRequest o no, para que sepa cómo responde el tipo de respuesta que el cliente tiene JS desactivado (a partir de ahora, en su mayoría son los navegadores móviles más antiguos que tienen JS deshabilitado).

if ("XMLHttpRequest".equals(request.getHeader("X-Requested-With"))) {
    // Return ajax response (e.g. write JSON or XML).
} else {
    // Return regular response (e.g. forward to JSP).
}

Tenga en cuenta que la relativamente nueva XMLHttpRequest versión 2 es capaz de enviar un archivo seleccionado utilizando las nuevas API de File y FormData . Consulte también Carga de archivos HTML5 a Java Servlet y envío de un archivo como multiparte a través de xmlHttpRequest .