jquery - 如何使用 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 jQuery 使用的版本 1 中，无法使用 JavaScript 通过 XMLHttpRequest 上传文件。 。常见的解决方法是让 JavaScript 创建一个隐藏的 <iframe>并将表单提交给它，以便给人一种它是异步发生的印象。这也正是大多数 jQuery 文件上传插件正在做的事情，例如 jQuery Form plugin (an example)。

假设您的带有 HTML 表单的 JSP 以这种方式重写，以便当客户端禁用 JavaScript 时它不会损坏(就像您现在一样......)，如下所示:

<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 Form 插件的帮助下，只需执行以下操作

<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 can I upload files to a server using JSP/Servlet?

如果 X-Requested-With 则只需要在 servlet 中进行额外检查 header 等于 XMLHttpRequest或不，以便您知道在客户端禁用了 JavaScript 的情况下如何返回什么样的响应(到目前为止，主要是旧版移动浏览器禁用了 JavaScript)。

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

请注意，相对较新的 XMLHttpRequest版本 2 能够使用新的 File 发送选定的文件。和FormData蜜蜂。另请参阅 HTML5 drag and drop file upload to Java Servlet 和 Send a file as multipart through XMLHttpRequest 。