文件上传后 AJAX 不会重定向到网页 - POST 方法答案

【问题标题】：AJAX does not redirect to a webpage after file uploading - POST method文件上传后 AJAX 不会重定向到网页 - POST 方法
【发布时间】：2016-09-15 13:25:03
【问题描述】：

我目前正在尝试开发针对 Google Chrome（4 及更高版本）优化的 Java Web 应用程序。

我希望用户能够选择多个文件，将它们上传到服务器（使用网页中显示的名为 uploadForm 的表单），并在上传完成后自动重定向到另一个网页（称为上传） .

因此，我创建了一个已定义上传表单的 JSP 文件 (uploadForm.jsp)。我还使用 XMLHttpRequest 对象实现了文件上传过程（它是软件规范的一部分。我别无选择）

<body>
    <form id="file_form" action="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="file_input[]" id="file_select" multiple webkitdirectory=""/> 
        <button type="submit" id="upload_button" >Upload</button>
    </form> 
</body>

<script type="text/javascript">

        // Get the form
        var form = document.getElementById("file_form");

        // Get the file selecter
        var fileSelect = document.getElementById("file_select");

        // Get the button which allows to upload the documents
        var uploadButton = document.getElementById("upload_button");

        // Set up the request
        var xhr = new XMLHttpRequest();

        // Create a new FormData object
        var formData = new FormData();

        form.onsubmit = function(event){

            // Prevent the form to be submitted. We want to write our 
            // own submission protocol
            event.preventDefault();

            // Update the button status during the uploading
            uploadButton.innerHTML = 'Uploading...';

            // Get the selected files from the input
            var files = fileSelect.files;

            // Loop through each of the selected files
            for(var i=0;i<files.length;i++){

                // The file contained in the file list
                var file = files[i];

                // Add the file to the request
                formData.append('file_input[]',file,file.name);

                xhr.open('POST','upload',true);  

                // Send the data
                xhr.send(formData);                 
            }
        };

        // Set up a handler for when the request finishes
        xhr.onload = function(){

            if(xhr.status===200){

                // File uploaded
                uploadButton.innerHTML = 'Uploaded';
            }else{
                alert('An error occurred.File was not uploaded');
            }
        };

    </script>

上传完成后。用户会自动重定向到另一个名为“upload”的网页 (upload.jsp) 并由 Servlet (UploadServlet.java) 引用：

上传.jsp：

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        Everything ok
    </body>
</html>

UploadServlet.java：

@WebServlet(urlPatterns = {"/upload"})
public class UploadServlet extends HttpServlet {

/**
 * Handles the HTTP <code>POST</code> method.
 *
 * @param request servlet request
 * @param response servlet response
 * @throws ServletException if a servlet-specific error occurs
 * @throws IOException if an I/O error occurs
 */
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    System.out.println("I am in the servlet");

    RequestDispatcher dispatcher=getServletContext().getRequestDispatcher("/WEB-INF/upload.jsp");
    dispatcher.forward(request,response);
 }

所选文件已正确上传到服务器。但是，当上传完成后，用户实际上并没有被重定向到“上传”网页。他仍然在“uploadForm”网页中，这不是我所期望的。

你能帮帮我吗？非常感谢您的回答

【问题讨论】：

标签： javascript java ajax jsp file-upload

【解决方案1】：

ajax 调用不会导致重定向（直接）。当您恢复 200 就绪状态更改时，让 javascript 进行重定向。您可以考虑让它返回文件已正确上传的信息，而不是在您的 servlet 中使用转发，并检查该信息以进行验证...

【讨论】：