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> 

當你看到一個文件，多個文件，而且我有一個文本值。這個值'ajax'，一次發送。我使用'JQuery'。

我不能以任何方式

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

您不需要手動執行此操作;如果您只是將form作爲DOMElement提供給FormData構造函數，則所有表單值將自動包含給您。

另請注意，您應該勾選表單的submit事件，而不是提交按鈕的click事件。你也應該刪除使用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); 
     } 
    }) 
})