¿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.

que 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 esta 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 aparece para enviar el contenido del archivo.

Answer 1

Hasta el punto, a partir de la corriente XMLHttpRequest versión 1 tal como se utiliza por jQuery, es no posible subir archivos a través de JavaScript a través XMLHttpRequest. La solución común es permitir que JavaScript cree un oculto y enviar el formulario en su lugar para que la impresión se cree que ocurre de forma asincrónica. Eso también es exactamente lo que hace la mayoría de los complementos de carga de archivos jQuery, como jQuery Form plugin (example here).

Suponiendo que su JSP con el formulario HTML se reescribe de forma tal manera que no es roto cuando el cliente tiene JS desactivado (ya que tienes 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 de la Forma plugin de jQuery sólo 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 a la parte servlet, hay cosas especiales que hay que hacer aquí. Sólo aplicar exactamente de la misma manera como lo haría cuando no se utiliza Ajax: How to upload files to server using JSP/Servlet?

lo único que necesita una comprobación adicional en el servlet si la cabecera es igual a X-Requested-WithXMLHttpRequest o no, por lo que ya sabe cómo qué tipo de respuesta a la devolución para el caso en que el cliente tiene JS deshabilitado (a partir de ahora, son principalmente 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 el relativamente nuevo XMLHttpRequest la versión 2 es capaz de enviar un archivo seleccionado utilizando las nuevas FileFormData y APIs. Vea también HTML5 File Upload to Java Servlet y sending a file as multipart through xmlHttpRequest.

Answer 2

Este código funciona bien para mí:

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

 

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

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

Answer 3

@ código de Monsif funciona bien si el formulario tiene entradas de tipo de archivo solamente, si la hay algunas otras entradas de otros luego presentar tipo, entonces ellos 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 de @ Monsif y la publicación https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/, obtuve el siguiente código que funcionó para mí. 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 que puede ser algo como lo siguiente:

<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 4

Este código funciona para mí.

bienes comunes usados ​​io.jar & Commons archivo upload.jar y la forma de plugin de 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