フォームデータをjqueryを通して画像と共に渡すには？

Question

フォームデータをjquery経由でPHPページに渡したいと思います。今では、jqueryを通過する画像とPHPページにどのように到達するのか、少し混乱しています。

マイコード：

<script> 
    $(document).ready(function() { 
     $('form').submit(function(event) { //Trigger on form submit 
     $('#name + .throw_error').empty(); //Clear the messages first 
     $('#success').empty(); 

     var guestbookSendMessage = { //Fetch form data 
      'name' : $('input[name=name]').val(), //Store name fields value 
     'msg': $('textarea[name=msg]').val() 
     'file' :$("#fileInput")[0].files[0]; 
     }; 

     $.ajax({ //Process the form using $.ajax() 
      type : 'POST', //Method type 
      url  : 'php/process.php', //Your form processing file url 
      data : guestbookSendMessage, //Forms name 
      dataType : 'json', 
      success : function(data) { 

      if (!data.success) { //If fails 
      if (data.errors.name) { //Returned if any error from process.php 
       $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error 
      } 
      } else { 
       $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message 
      } 
      } 
     }); 
      event.preventDefault(); //Prevent the default submit 
     }); 
    }); 
</script> 

Answer 1

var fdata  = new FormData(); 
var myform  = $('#prfform'); // specify the form element 
var idata  = myform.serializeArray(); 
var document = $('input[type="file"]')[0].files[0]; 
fdata.append('document[]', document); 
$.each(idata,function(key,input){ 
    fdata.append(input.name,input.value); 
}); 
$.ajax({ 
    url:"process.php", 
    type: "POST", 
    data: fdata, 
    processData: false, 
    contentType: false, 
    beforeSend: function() { 
     //something before send 
    }, 
    success:function(data) { 
     //something after response 
    } 
}); 

<form name="prfform" id="prfform" method="post" enctype="multipart/form-data"> 
    <!-- elements --> 
</form> 

このコードを試してみてください。 "enctype"はフォーム内で重要です。 ajaxスクリプトで、 "processData：false"と "contentType：false"を指定してください

これで問題が解決する場合があります。

Answer 2

File APIまたはFormDataを使用して、画像データをajaxでサーバーに送信することができます。どのようなものを選ぶかは決めるべきですが、FormDataは実装が簡単なので、ここでFormDataを使用して質問に回答します。

まず、FormDataコンテナを作成し、それにデータを追加する必要があります。ただ、これはあなたのデータをできるようになりますこれら二つの

processData: false, 
contentType: false 

を追加するには、$.ajax

dataType: 'json' 

にあなたのコード今の代わりに、このパラメータのこの

var guestbookSendMessage = new FormData(); 

guestbookSendMessage.append('name', $('input[name=name]').val()); 
guestbookSendMessage.append('msg', $('textarea[name=msg]').val()); 
guestbookSendMessage.append('file', $("#fileInput")[0].files[0]); 

と

var guestbookSendMessage = { //Fetch form data 
    'name': $('input[name=name]').val(), //Store name fields value 
    'msg': $('textarea[name=msg]').val() 
    'file': $("#fileInput")[0].files[0]; 
}; 

を修正t正しく解釈される。

は、今すぐあなたのphp/process.phpスクリプトで、あなたの$_POSTスーパーグローバル配列と$_FILESで'file'に'name'と'msg'を取得します。