How to pass form data along with image through jquery?

Question

I would like to pass form data via jquery to a php page. Now I am little confused with image passing through jquery and how it will reach php page.

My code:

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

score 2 · Answer 1 · answered Feb 10 '17 at 17:59

You may use File API or FormData to send image data to your server with ajax. What to choose is up to you to decide but since FormData is easier to implement I will answer your question using FormData here.

First of all you need to create FormData container and append your data to it. Just amend your code

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

with this

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

Now instead of this parameter in your $.ajax

dataType: 'json'

Add these two

processData: false,
contentType: false

This will allow your data to be interpreted correctly.

Now in your php/process.php script you'll get 'name' and 'msg' in your $_POST superglobal array and 'file' in $_FILES.

score 0 · Answer 2 · answered Feb 10 '17 at 17:48

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>

Please try this code. "enctype" is important in the form. In ajax script, give "processData: false" and "contentType: false"

This might solve your issue.

How to pass form data along with image through jquery?

2 Answers2