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;

i dont want to use jquery. what i sthis line doing? var file_data = $('#sortpicture').prop('files')[0]; — user784512
– user784512, Commented Apr 6, 2015 at 19:34

Omar Elawady · Accepted Answer · 2015-04-06 20:26:51Z

2

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

edited Apr 6, 2015 at 20:26

answered Apr 6, 2015 at 20:15

Omar Elawady

3,3601 gold badge15 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Luke · Accepted Answer · 2015-04-06 19:19:28Z

1

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

edited Apr 6, 2015 at 19:19

Luke

11.5k43 gold badges63 silver badges70 bronze badges

answered Apr 6, 2015 at 19:18

The Guest

74211 silver badges28 bronze badges

10 Comments

The Guest Over a year ago

try printing the variable: print_r($_FILES); and see what you get?

The Guest Over a year ago

try adding this into your form tag: enctype="multipart/form-data"

user784512 Over a year ago

sorry for not posting my form but i have it.

user784512 Over a year ago

i tried printing the photo i get from this var photo = document.getElementById("photo").value; and i get this path C:\fakepath\images.jpg

The Guest Over a year ago

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)

|

Collectives™ on Stack Overflow

send photo from javascript to php

2 Answers 2

Comments

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related