send image url and data through serialization

Question

I am trying to make a form where there will be user data(name,dob etc) and an image. When user submits the form a pdf will be generated with the user given data and the image. I can successfully serialize the data but failed to get image in my pdf. I am using simple ajax post method to post data. Below is my code.
HTML code

<form onsubmit="submitMe(event)" method="POST" id="cform">
<input type="text" name="name" placeholder="Your Name" required>
<input type="file" name="pic" id="pic" accept="image/*" onchange="ValidateInput(this);" required>
<input type="submit" value="Preview"/>
</form>

Jquery code

function submitMe(event) {

    event.preventDefault();
  jQuery(function($)
  {
  var query = $('#cform').serialize();
    var url = 'ajax_form.php';

    $.post(url, query, function () {

     $('#ifr').attr('src',"http://docs.google.com/gview?url=http://someurl/temp.pdf&embedded=true");

    });


  });

}

PHP code

<?php
$name=$_POST['name'];
$image1=$_FILES['pic']['name'];
?>

Here I am not getting image1 value. I want to get the url of the image.

You cannot upload a file using ajax like that. You need a `FormData` object. See for example http://stackoverflow.com/questions/21044798/how-to-use-formdata-for-ajax-file-upload — jeroen, Feb 08 '17 at 14:40
@jeroen can u please tell me how to access each data sent though ajax in the php file.? — Rana, Feb 09 '17 at 06:54

score 0 · Answer 1 · edited May 23 '17 at 12:33

0

You need FormData to achieve it.

SOURCE

Additionally, you need to change some stuff inside ajax call(explained in link above)

contentType: false
cache: false           
processData:false

So the full call would be:

$(document).on('change','.pic-upload',uploadProfilePic);
#.pic-upload is input type=file

function uploadProfilePic(e){

var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);


var newpic = e.target.files;
var actual = new FormData();
actual.append('file', newpic[0]);

$.ajax({
type:"POST",
url:"uploadpic.php",
data: actual,
contentType: false, 
cache: false,    
processData:false,
dataType:"json",   
success: function (response){
#Maybe return link to new image on successful call
} 
});
}

Then in PHP you handle it like this:

$_FILES['file']['name']

since you named it 'file' here:

actual.append('file', newpic[0]);

edited May 23 '17 at 12:33

Community

1
1

answered Feb 08 '17 at 14:51

ii7scw

191
1
2
15

thanx for the answer.i did some thing like this 'var form = $('form')[0];var formData = new FormData(form);'. Can u please tell me how to access each form elemnt(text, image) in php file. Thanx again. – Rana Feb 09 '17 at 06:38
@Rana Did you try $_POST['pic'] or $_POST['name'] in PHP? – ii7scw Feb 09 '17 at 08:49
I think you need to use append so that you set the key/value pair that PHP can access(there is some problem with just putting it inside FormData and sending to PHP) var formData = new FormData(); formData.append('myname',$('form')[0]); Then try $_POST['myname'] – ii7scw Feb 09 '17 at 09:15
Thank u. i will try it. – Rana Feb 09 '17 at 11:56

send image url and data through serialization

1 Answers1