フォームデータ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の作業良いです。しかし、この1つのtype = fileフィールド属性を使用して複数のファイルをphpファイルにアップロードできるようにしようとしています。今のように、一度に1つのファイルしか取ることができません。複数のファイルのアップロードを処理できるように、フォームとJavaScriptコードの両方を調整するにはどうすればよいですか？

ご協力いただければ幸いです。

ありがとうございます！

Answer 1

ここにアクセスできるajax、html、php globalがあります。それがあなたのために働くかどうか私に教えてください。

// 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と仮定すると、このようなものです：あなたはPHPの配列としてファイルにアクセスすることになる、我々は[]を使用しているのであなたは単に

$("#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(''); 
}); 

を行うことができ

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

。

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