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

Question

I am currently trying to develop a Java web application optimized for Google Chrome (4 and higher). 我目前正在尝试开发针对Google Chrome（4及更高版本）优化的Java Web应用程序。

I would like the user to be able to select several files, upload them to a server (using a form displayed in a webpage called uploadForm) and when the uploading has finished, to be automatically redirected to another webpage (called upload). 我希望用户能够选择多个文件，将它们上载到服务器（使用显示在网页上的表单称为uploadForm），并在上载完成后将其自动重定向到另一个网页（称为上载）。

Therefore, I have created a JSP file ( uploadForm.jsp ) where an upload form has been defined. 因此，我创建了一个JSP文件（ uploadForm.jsp ），其中已定义了一个上传表单。 I have also implemented the file uploading process using the XMLHttpRequest object (It is part of the Software Specifications. I have no other choice) 我还使用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>

When the upload has finished. 上传完成后。 The user is automatically redirected to another webpage called "upload" ( upload.jsp ) and referenced by a Servlet ( UploadServlet.java ): 用户将自动重定向到另一个名为“ upload”的网页（ upload.jsp ），并由Servlet（ UploadServlet.java ）引用：

upload.jsp: upload.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: 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);
 }

The selected files are correctly uploaded to the server. 所选文件已正确上传到服务器。 However, when the uploading has finished, the user is actually not redirected to the "upload" webpage. 但是，上传完成后，实际上用户不会重定向到“上传”网页。 He remains in the "uploadForm" webpage and this is not what I expected. 他留在“ uploadForm”网页上，这不是我所期望的。

Could you help me please ? 请问你能帮帮我吗？ Thank you so much for your answers 非常感谢您的回答

Answer 1

ajax calls will not cause a redirect (directly). ajax调用不会（直接）导致重定向。 When you get your 200 ready state change back have the javascript do the redirect. 当您准备好200状态后，请变回JavaScript进行重定向。 instead of having a forward in your servlet you may consider having it return information that the file was correctly uploaded and check that for validation... 您可以考虑让它返回该文件已正确上传的信息，并检查其是否有效，而不是在servlet中使用转发器。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2016-05-18 22:41:02

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2016-05-18 22:41:02

解决方案1
2 已采纳 2016-05-18 22:41:02