JSP/ServletとAjaxを使用してサーバーにファイルをアップロードする方法は？

Question

私はJSP /サーブレットWebアプリケーションを作成していますが、Ajax経由でサーブレットにファイルをアップロードしたいと思います。これをどうやってやりますか？私はjQueryを使用しています。

私がこれまで行ってきた：この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> 

を：

$(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

のjQueryで使用されるように、現在のXMLHttpRequestバージョン1のよう指すように、XMLHttpRequestを通じてJavaScriptを使用してファイルをアップロードすることができではありません。一般的な回避策は、JavaScriptを非表示にしてをフォームに送信して、インプレッションが非同期に発生するようにすることです。これはまさに、jQuery Form plugin（example here）のようにjQueryファイルアップロードプラグインの大部分がやっていることです。クライアントが無効になっJSを（あなたが今持っているとして...）、持っていたときにHTMLフォームを使用してJSPををそれはないような方法で書き換え壊れていると仮定すると

以下のように：

<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> 

そして、サーブレット側に関しては

<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> 

だけの問題jQueryのフォームプラグインの助けを借りて、特別なものは、ここで実行する必要がないです。ただ、正確にアヤックスを使用していないときに行うだろうと同じようにそれを実装：X-Requested-WithヘッダがXMLHttpRequestかに等しい場合、あなたはどのようにどのような種類の知っているように、How to upload files to server using JSP/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は新しいFileとFormData APIを使用して、選択したファイルを送信することが可能であることに留意されたいです。 HTML5 File Upload to Java Servletおよびsending a file as multipart through xmlHttpRequestも参照してください。

Answer 2

このコードは私のために正常に動作します：その後、タイプファイル他のいくつかの他の入力がある場合は、フォームは、専用のファイルタイプの入力を持っている場合

Monsifのコード@

$('#fileUploader').on('change', uploadFile); 
 

 

 
function uploadFile(event) 
 
\t { 
 
\t  event.stopPropagation(); 
 
\t  event.preventDefault(); 
 
\t  var files = event.target.files; 
 
\t  var data = new FormData(); 
 
\t  $.each(files, function(key, value) 
 
\t  { 
 
\t   data.append(key, value); 
 
\t  }); 
 
\t  postFilesData(data); 
 
\t } 
 
\t 
 
function postFilesData(data) 
 
\t { 
 
\t $.ajax({ 
 
     url: 'yourUrl', 
 
     type: 'POST', 
 
     data: data, 
 
     cache: false, 
 
     dataType: 'json', 
 
     processData: false, 
 
     contentType: false, 
 
     success: function(data, textStatus, jqXHR) 
 
     { 
 
     \t //success 
 
     }, 
 
     error: function(jqXHR, textStatus, errorThrown) 
 
     { 
 
      console.log('ERRORS: ' + textStatus); 
 
     } 
 
\t  }); 
 
\t }

<form method="POST" enctype="multipart/form-data"> 
 
\t <input type="file" name="file" id="fileUploader"/> 
 
</form>

Answer 3

はうまく機能し、彼らは失われます。そのため、各フォームデータをコピーしてFormDataオブジェクトに追加する代わりに、元のフォーム自体をコンストラクタに渡すことができます。

@ Monsifのコードとhttps://www.new-bamboo.co.uk/blog/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata/の投稿について、私は私のために働いた次のコードを出しました。私はそれが他の人を助けることを望む。

<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> 

Answer 4

このコードは、私の作品：

<script type="text/javascript"> 
     var files = null; // when files input changes this will be initiliazed. 
     $(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コードは次のようなものにすることができます。

は&コモンズのファイルupload.jarとjQueryのフォームプラグインあなたがXMLHttpRequestのメソッドを使用することができます

<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>

<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>

boolean isMultipart = ServletFileUpload.isMultipartContent(request); 

     if (isMultipart) { 
      // Create a factory for disk-based file items 
      FileItemFactory factory = new DiskFileItemFactory(); 

      // Create a new file upload handler 
      ServletFileUpload upload = new ServletFileUpload(factory); 

      try { 
       // Parse the request 
       List items = upload.parseRequest(request); 
       Iterator iterator = items.iterator(); 
       while (iterator.hasNext()) { 
        FileItem item = (FileItem) iterator.next(); 
        if (!item.isFormField()) { 
         String fileName = item.getName();  
         String root = getServletContext().getRealPath("/"); 
         File path = new File(root + "../../web/Images/uploads"); 
         if (!path.exists()) { 
          boolean status = path.mkdirs(); 
         } 

         File uploadedFile = new File(path + "/" + fileName); 
         System.out.println(uploadedFile.getAbsolutePath()); 
         item.write(uploadedFile); 
        } 
       } 
      } catch (FileUploadException e) { 
       e.printStackTrace(); 
      } catch (Exception e) { 
       e.printStackTrace(); 
      } 
     } 
    } 



enter code here