ajaxを使用してファイルやその他のデータを送信する

ajaxを使用してファイルや文字列を含むサーバーにデータを送信しようとしています。 JSPでの私のコードは次のとおりです。ajaxを使用してファイルやその他のデータを送信する

<html> 
... 
<body> 
... 
    <form id="data" method="post" enctype="multipart/form-data"> 
     <input name="classroomID" type="hidden" value="1" /> 
     <input type="file" name="file" size="30" id="file" /> 
     <button>Submit</button> 
    </form> 

    <script type="text/javascript" 
     src='https://code.jquery.com/jquery-3.1.0.min.js'></script> 
    <script type="text/javascript" src='sendUpload.js'></script> 
... 
</body> 
</html>

そして、私のsendUpload.jsは、次のようになります

$(document).ready(function() { 
    console.log("here"); 

    $("form#data").submit(function(ev){ 
     ev.preventDefault(); 
     console.log("Submitted"); 
     var formData = new FormData($(this)[0]); 

     console.log(JSON.stringify(formData)); 

     $.ajax({ 
      url: "UploadServlet", 
      type: 'POST', 
      data: formData, 
      success: function (data) { 
       alert(data) 
      }, 
      cache: false, 
      contentType: false, 
      processData: false 
     }); 

     return false; 
    }); 
});

しかしJSONデータは空です。助言がありますか？私はjavaサーブレットを使用しています。

出典

2017-06-11 GeorgeDopeG

あなたが私たちと遭遇したエラーを共有していただけますか？ – Catalyst

@Catalystいいえ動作するように変更しましたが、何らかの理由でデータがありません。 JSON.stringifyはempyですが、少なくとも1の値を持つclassroomIDが必要です。 – GeorgeDopeG

どのようなエラーが表示されていますか？これに

$("form#data").submit(function(ev){

：しかし、あなたが特定のエラーを投稿する必要があり

$("#data").submit(function(ev){

本当にわからないあなたのjQueryのセレクタが間違っているように見える、私はこれを変更してみてくださいと思います。

var formData = new FormData(); 
formData.append('classroomID', $('#classroomID').val()); 
formData.append('file', $('#file')[0].files[0]);

を...そして、あなたのclassroomID入力欄に 'classroomID' のIDを与える：

出典

2017-06-11 11:08:16

何も変更されません。私はもうエラーは出ませんが、ファイルをアップロードしても値が1の非表示入力があってもJSONデータは空です。 – GeorgeDopeG

async：true、 data：formData、 cache：false、 contentType：false、 processData：false、 –

これは機能しません。 – GeorgeDopeG

あなたはこれを行うことができます。デバッグにこれを使用する必要がありますので、

また、コンソールから直接FORMDATAを検査することはできません。

for (var item of formData) { 
    console.log(item); 
}

出典

2017-06-11 11:15:16

私はまた、classroomID入力を送信します。この場合、私は何ができますか？ – GeorgeDopeG

formroomオブジェクトにclassroomIDフィールドを追加するだけです。私は私の答えを更新しました。 –

私はそれを行い、次のエラーを出します：Uncaught TypeError：未定義のプロパティ '0'を読み取ることができません – GeorgeDopeG

$(document).ready(function() { 
 
    $("form#data").submit(function(e){ 
 
     e.preventDefault(); 
 

 
     $.ajax({ 
 
      url: "UploadServlet", 
 
      type: 'POST', 
 
      data: { 
 
       classroomID: $('input[name="classroomID"]').val(), 
 
       file: $('input[name="file"]').val() 
 
      }, 
 
      success: function (data) { 
 
       alert(data); 
 
      }, 
 
      cache: false, 
 
      contentType: false, 
 
      processData: false 
 
     }); 
 

 
     return false; 
 
    }); 
 
});

それはあなたのために動作しますか？

出典

2017-06-11 15:00:21

ajaxを使用してファイルやその他のデータを送信する

答えて

関連する問題