jqueryのAjaxのポストファイル、複数のファイルやテキスト入力

Question

ハローみんな私のhtmlコード：

<form action="post.php" enctype="multipart/form-data" method="post"> 
    <input type="text" name="name" id=""><br> 
    <input type="file" name="poster" id="poster"><br> 
    <input type="file" name="scene[]" id="scene" multiple><br> 
    <input type="submit" value="POST"> 
</form> 

あなたは、単一のファイル、複数のファイルを参照してください、と私は1つのテキスト値を持っているよう。この値 'ajax'は一度に送信したい。 「JQuery」を使用しています。

私は、他の同様のソリューションを見て、それは私の問題 を修正し、私の悪い英語をsoryませんでしたどのような方法で

$(function(){ 
     $('input[type="submit"]').click(function(e){ 
      e.preventDefault(); 
      var file_data = $('#poster').prop('files')[0]; 
      var form = $('form').serialize(); 
      var form_data = new FormData(); 
      $.each($('input[name="scene[]"]'),function(i, obj) { 
       $.each(obj.files,function(j,file){ 
        form_data.append('photo['+i+']', file); 
        }) 
       }); 
      form_data.append(form); 
      form_data.append('file',file_data); 
      alert(form_data); 
      $.ajax({ 
       url:'post.php', 
       cache:false, 
       contentType:false, 
       processData:false, 
       async:false, 
       data:form_data, 
       type:'post', 
       success:function(answ){ 
        $('#result').html(answ); 
       } 
      }) 
     }) 
    }) 

を実行することはできません。

Answer 1

これは手動で行う必要はありません。 FormDataコンストラクタにformをDOMElementとして提供するだけで、すべてのフォーム値が自動的に組み込まれます。

送信ボタンのclickイベントではなく、フォームのsubmitイベントにフックする必要があります。また、使用するには非常に悪い習慣であるので、async: falseの使用を削除する必要があります。

$('form').submit(function(e){ 
    e.preventDefault(); 
    var form_data = new FormData(this); 

    $.ajax({ 
     type: 'post', 
     url: 'post.php', 
     data: form_data, 
     cache: false, 
     contentType: false, 
     processData: false, 
     success: function(answ){ 
      $('#result').html(answ); 
     } 
    }) 
})