send photo from javascript to php

Question

I am trying to send with ajax a photo from javascript to php. I have this input in html:

<input type="file" class="input-field" id="photo" name="photo">

this in javascript:

var photo = document.getElementById("photo").value;

and this in php:

$photo_location = $_FILES['photo']['tmp_name'];

I am using ajax post to send the photo and some other data in php. All other data are received correctly in php except the photo. is the getelementbyid .value method which gets the photo wrong ? i get an error undefined index photo from php.

xmlhttp.open("POST", "ajaxpost.php");
    xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    var payload = "name=" + name + "&price=" + price + "&quantity=" + quantity + "&description=" + description + "&photo=" + photo;
    payload = payload.replace("%20", "+");
    payload = payload.replace("%3D", "=");

    xmlhttp.send( payload );

    return false;

Check this: http://stackoverflow.com/questions/23980733/jquery-ajax-file-upload-php — RNK, Apr 06 '15 at 19:30
i dont want to use jquery. what i sthis line doing? `var file_data = $('#sortpicture').prop('files')[0]; ` — user784512, Apr 06 '15 at 19:34

Omar Elawady · Accepted Answer · 2015-04-06T20:26:51.723

the error is that you send file as normal input so php will recieve it in $_POST not $_FILES.

you can do it using FormData like this:

var photo = document.getElementById("photo");

var data=new FormData();
//from inputs
data.append(photo.name,photo.files[0]);
data.append('name',name);
data.append('price',price);
data.append('quantity',quantity);
data.append('description',description);

var xmlhttp=new XMLHttpRequest()
xmlhttp.open("POST", "ajaxpost.php");
xmlhttp.send(data);

score 0 · Answer 2 · edited Apr 06 '15 at 19:19

0

$photo_location = $_FILES['file']['photo'];

edited Apr 06 '15 at 19:19

Luke

11,426
43
60
69

answered Apr 06 '15 at 19:18

The Guest

698
11
27

try printing the variable: print_r($_FILES); and see what you get? – The Guest Apr 06 '15 at 19:28
try adding this into your form tag: enctype="multipart/form-data" – The Guest Apr 06 '15 at 19:34
sorry for not posting my form but i have it. – user784512 Apr 06 '15 at 19:36
i tried printing the photo i get from this `var photo = document.getElementById("photo").value;` and i get this path `C:\fakepath\images.jpg` – user784512 Apr 06 '15 at 19:38
Can you please post your php code so that I can see how you are getting other values correctly (i.e. name, price, quantity and etc) – The Guest Apr 06 '15 at 19:47
`$quantity = $_POST['quantity']; $description = $_POST['description']; $photo_location = $_FILES['photo']['tmp_name'];` – user784512 Apr 06 '15 at 19:51
what happens if you use $photo = $_POST['photo'];, and echo $photo .... in your php file? – The Guest Apr 06 '15 at 19:59
By seeing your ajax code all I can say that use this way. Thats what you want, right? – The Guest Apr 06 '15 at 20:06
I am not sure, i need what is required for me to be able to upload the image with a query to a database. can i do it with the path i get now? – user784512 Apr 06 '15 at 20:13
I you want to save the url of the image in database, then it works. – The Guest Apr 06 '15 at 20:24

send photo from javascript to php

2 Answers2