表單數據通過ajax和文本字段一起上傳多個文件

Question

美好的一天全部，

我有一個表單將有多個字段。此外，表單正通過使用ajax的表單數據方法提交給php文件。

以下是提交表單數據的JavaScript代碼。

$(".update").click(function(){ 

     $.ajax({ 
     url: 'post_reply.php', 
     type: 'POST', 
     contentType:false, 
     processData: false, 
     data: function(){ 
      var data = new FormData(); 
      data.append('image',$('#picture').get(0).files[0]); 
      data.append('body' , $('#body').val()); 
      data.append('uid', $('#uid').val()); 
      return data; 
     }(), 
      success: function(result) { 
      alert(result); 
      }, 
     error: function(xhr, result, errorThrown){ 
      alert('Request failed.'); 
     } 
     }); 
     $('#picture').val(''); 
$('#body').val(''); 
}); 

而且，下面是實際的形式：

<textarea name=body id=body class=texarea placeholder='type your message here'></textarea> 
<input type=file name=image id=picture > 
<input name=update value=Send type=submit class=update id=update /> 

這種形式和javascript工作好，因爲它們。但是，我試圖能夠使用這一個單一的type = file字段屬性將多個文件上傳到php文件。就像現在一樣，它一次只能取一個文件。如何調整表單和JavaScript代碼以便能夠處理多個文件上傳？

任何幫助將不勝感激。

謝謝！

Answer 1

這裏是您可以訪問的ajax，html和php全局。請讓我知道這對你有沒有用。

// Updated part 
jQuery.each(jQuery('#file')[0].files, function(i, file) { 
    data.append('file-'+i, file); 
}); 

// Full Ajax request 
$(".update").click(function(e) { 
    // Stops the form from reloading 
    e.preventDefault(); 

     $.ajax({ 
     url: 'post_reply.php', 
     type: 'POST', 
     contentType:false, 
     processData: false, 
     data: function(){ 
      var data = new FormData(); 
      jQuery.each(jQuery('#file')[0].files, function(i, file) { 
       data.append('file-'+i, file); 
      }); 
      data.append('body' , $('#body').val()); 
      data.append('uid', $('#uid').val()); 
      return data; 
     }(), 
      success: function(result) { 
      alert(result); 
      }, 
     error: function(xhr, result, errorThrown){ 
      alert('Request failed.'); 
     } 
     }); 
     $('#picture').val(''); 
$('#body').val(''); 
}); 

更新HTML：

<form enctype="multipart/form-data" method="post"> 
    <input id="file" name="file[]" type="file" multiple/> 
    <input class="update" type="submit" /> 
</form> 

現在，在PHP中，你應該能夠訪問您的文件：

// i.e.  
$_FILES['file-0'] 

Answer 2

這裏的另一種方式。

假設你的HTML是這樣的：

<form id="theform"> 
    <textarea name="body" id="body" class="texarea" placeholder="type your message here"></textarea> 
    <!-- note the use of [] and multiple --> 
    <input type="file" name="image[]" id="picture" multiple> 
    <input name="update" value="Send" type="submit" class="update" id="update"> 
</form> 

你可以簡單地做

$("#theform").submit(function(e){ 
    // prevent the form from submitting 
    e.preventDefault(); 
    $.ajax({ 
     url: 'post_reply.php', 
     type: 'POST', 
     contentType:false, 
     processData: false, 
     // pass the form in the FormData constructor to send all the data inside the form 
     data: new FormData(this), 
     success: function(result) { 
      alert(result); 
     }, 
     error: function(xhr, result, errorThrown){ 
      alert('Request failed.'); 
     } 
    }); 
    $('#picture').val(''); 
    $('#body').val(''); 
}); 

因爲我們使用[]，你會訪問文件作爲PHP的數組。

<?php 
print_r($_POST); 
print_r($_FILES['image']); // should be an array i.e. $_FILES['image'][0] is 1st image, $_FILES['image'][1] is the 2nd, etc 
?> 

的更多信息：

• FormData constructor
• Multiple file input