Как передать данные формы вместе с изображением через 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 и добавить к нему свои данные. Просто изменить код

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

с этим

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]); 

Теперь вместо этого параметра в $.ajax

dataType: 'json' 

Добавить эти два

processData: false, 
contentType: false 

Это позволит ваши данные T o интерпретироваться правильно.

Теперь в вашем php/process.php сценарии вы получите 'name' и 'msg' в вашем $_POST суперглобальном массива и 'file' в $_FILES.