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

一尘不染

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

jsp

我正在创建一个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");
        }
    });
});

但是，它似乎没有发送文件内容。

阅读 300

2020-06-08

共1个答案

一尘不染

到目前为止，XMLHttpRequest从jQuery使用的当前版本1开始，无法
使用JavaScript上传文件XMLHttpRequest。常见的解决方法是让JavaScript创建一个隐藏文件，<iframe>然后向其提交表单，以便创建印象，使它异步发生。这也正是大多数jQuery文件上传插件所做的事情，例如jQuery
Form插件（此处为示例）。

假设您用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 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时完全相同的方法来实现它：如何使用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能够使用new File和FormDataAPI发送所选文件。

2020-06-08