如何使用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

说到点子上，如当前XMLHttpRequestjQuery使用的版本1是不可以使用JavaScript上传文件XMLHttpRequest..常见的解决方法是让JavaScript创建一个隐藏的<iframe>然后将表单提交给它，这样就会产生异步发生的印象。这也正是大多数jQuery文件上传插件所做的事情，例如jQuery表单插件 (这里的例子).

假设您的带有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时完全相同的方式实现它：如何使用JSP/Servlet将文件上传到服务器？

如果X-Requested-With标头等于XMLHttpRequest或者不是，这样您就知道在客户机禁用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能够使用新的File和FormDataAPI。另见HTML 5文件上传到Javaservlet和通过XMLHttpRequest将文件作为多部分发送.

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

        }

      });

  }

<form method="POST" enctype="multipart/form-data">

  <input type="file" name="file" id="fileUploader"/>

</form>