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

我正在创建一个JSP / Servlet Web应用程序，我想通过Ajax将文件上传到Servlet。 我该怎么做呢？ 我正在使用jQuery。

我做到目前为止：

有了这个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

到目前为止，从jQuery使用的当前XMLHttpRequest版本1开始， 无法通过XMLHttpRequest使用JavaScript上载文件。 常见的解决方法是让JavaScript创建一个隐藏的并将表单提交给它，以便创建它以异步方式发生的印象。 这也正是大多数jQuery文件上传插件正在做的事情，比如jQuery Form插件 （ 这里的例子 ）。

假设您的带有HTML表单的JSP以这种方式被重写，以便在客户端禁用JS时（例如您现在……）不会破坏它，如下所示：

 
  ${uploadError}   

然后它是jQuery Form插件的帮助只是一个问题

至于servlet方面，这里不需要做任何特殊的事情。 只是像不使用Ajax时那样实现它： 如何使用JSP / Servlet将文件上传到服务器？

如果X-Requested-With标头等于或不是XMLHttpRequest ，您只需要在servlet中进行额外的检查，这样您就知道在客户端已禁用JS的情况下如何返回何种响应（截至目前，它主要是旧的移动浏览器，它们已禁用JS）。

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

请注意，相对较新的XMLHttpRequest版本2能够使用新的File和FormData API发送选定的文件。 另请参阅HTML5文件上载到Java Servlet并通过xmlHttpRequest将文件作为multipart发送 。

Answer 2

这段代码对我来说很好：

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

Answer 3

如果表单只有文件类型输入，@ Monsif的代码很有效，如果除了文件类型之外还有其他一些输入，那么它们就会丢失。 因此，不是复制每个表单数据并将它们附加到FormData对象，而是可以将原始表单本身赋予构造函数。

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

html代码可能如下所示：

 
 First name:
  
 Last name:
  
  
   

Answer 4

这段代码适合我。

使用commons io.jar和commons文件upload.jar和jQuery表单插件

 
  ${uploadError}