如何使用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插件(这里的例子).

假设您的带有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 发送选定的文件.另请参阅HTML5文件上载到Java Servlet并通过xmlHttpRequest将文件作为multipart发送.

Answer 2

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

<script type="text/javascript">
        var files = null; // when files input changes this will be initialised.
        $(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>