如何使用JSP/Servlet和Ajax将文件上传到服务器？

Question

我正在创建一个JSP/Servlet Web应用程序，我想通过Ajax将文件上传到Servlet。我会如何去做这件事？我正在使用jQuery。

我迄今所做的：

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

有了这个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"); 
     } 
    }); 
}); 

但是，它不会出现发送文件内容。

Answer 1

为了这一点，作为当前XMLHttpRequest版本1 13759 jQuery的，它是不可能通过XMLHttpRequest上传使用JavaScript文件。常用的解决方法是让JavaScript创建一个隐藏的并将表单提交给它，以便创建它的异步发生的印象。这也正是大多数jQuery文件上传插件所做的，例如jQuery Form plugin（example here）。

假设与HTML表单你的JSP中这样的方式被重写，这样它不是破当客户有JS禁用（因为你现在有...），如下图所示：

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

然后，它使用jQuery形式的帮助插件只是一个

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

事至于servlet的一面，没有什么特别的东西需要在这里完成。只是实现它完全一样的方式，你会不会使用Ajax时做到：How to upload files to server using JSP/Servlet?

如果X-Requested-With头等于XMLHttpRequest与否您只需要在servlet额外的检查，让你知道如何什么样的响应返回的情况下，客户端已禁用JS（截至目前，它主要是旧的移动浏览器，JS禁用）。

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). 
} 

注意，相对较新的版本XMLHttpRequest 2能够发送使用新FileFormData和API的所选文件的。另请参阅HTML5 File Upload to Java Servlet和sending a file as multipart through xmlHttpRequest。

Answer 2

此代码工作正常，我：

$('#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

@ Monsif的代码工作好，如果窗体上有唯一的文件类型的输入，如果有其他然后键入文件的一些方面的投入，然后他们迷路了。因此，不是复制每个表单数据并将它们附加到FormData对象，而是将原始表单本身赋予构造函数。

关于@ Monsif的代码和https://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/后，我出来了以下代码为我工作。我希望它能帮助别人。

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

HTML代码可以是类似以下内容：

<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

此代码对我的作品。

用于公共io.jar &公共文件upload.jar和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