2016-05-18 15 views
0

現在、Google Chrome(4以上)用に最適化されたJava Webアプリケーションを開発しようとしています。ファイルアップロード後にAJAXがWebページにリダイレクトされない - POSTメソッド

複数のファイルを選択して(アップロードフォームと呼ばれるウェブページに表示されたフォームを使用して)サーバーにアップロードし、アップロードが完了したら自動的に別のWebページにリダイレクトされるようにします)。

アップロードフォームが定義されている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.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)で "アップロード"(にUpload.jsp )と呼ばれる別のWebページにリダイレクトされ、参照されています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"ウェブページに残っていて、これは私が期待したものではありません。

お願いします。 あなたのお返事ありがとうございます

答えて

2

ajaxコールでは(直接)リダイレクトは発生しません。あなたはあなたの200準備ができて状態の変更を取得すると、JavaScriptがリダイレクトを行う必要があります。あなたのサーブレットにフォワードがあるのではなく、ファイルが正しくアップロードされたという情報を返すことを検討し、それを確認することができます...

+0

ありがとう、ロブありがとう! –

関連する問題