Image Upload to PHP Via Ajax

Question

I am trying to create an image upload field in my application based on this question: Send FormData and String Data Together Through JQuery AJAX?
and this tutorial: http://www.formget.com/ajax-image-upload-php/
I have heard it is quite difficult, this is what i have tried.

HTML

<form method="POST" action="" id="logo_upload">
    <input type="file" name="logo_location" id="logo_location" enctype="multipart/form-data">
    <button type="submit" name="file_test" id="file_test">Test Upload</button>
</form>

JQuery

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data[0]);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        cache: false,
        contentType: false,
        processData: false,
        id: id
    });
});

PHP

var_dump($_FILES);
var_dump($_POST);

As you can see, I haven't got to the uploading side of things yet.

Result

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=0)</i>
  <i><font color='#888a85'>empty</font></i>
</pre>

I can't see what i am doing wrong, I am getting a result so it is getting to the right place, can anyone point me in the right direction?

EDIT: added #logo_upload in form var file_data = $('#logo_location')[0].files[0];
EDIT: replaced data with formData variable
EDIT: added attribute: enctype="multipart/form-data"
New Result:

<pre class='xdebug-var-dump' dir='ltr'>
<b>array</b> <i>(size=1)</i>
  'file' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'undefined'</font> <i>(length=9)</i>
</pre>

Silly question, but are you uploading the images, then manually browsing to http:// .. ../../../controllers/ajax_controller.php to view the dumps? — Drakes
– Drakes, Commented Apr 10, 2015 at 18:46
as in via a php request? no. the var_dump() is actually echoed back to the browser console — Edward
– Edward, Commented Apr 10, 2015 at 18:47

Musa · Accepted Answer · 2015-04-10 19:36:55Z

1

You're appending file_data[0] to the formdata object, file_data is the file not an array, use file_data.

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData();
    var file_data = $('#logo_location')[0].files[0];
    formData.append("file", file_data);

    $.ajax({
        url: "../../../controllers/ajax_controller.php?action=image_upload",
        type: 'POST',
        data: formData ,
        contentType: false,
        processData: false,
        success: function(data){
            console.log(data);
        }
    });
});

also you can instantiate the form data object with the form in question instead of doing the append.

$('#logo_upload').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);

    $.ajax({
    ...

edited Apr 10, 2015 at 19:36

answered Apr 10, 2015 at 19:30

Musa

97.9k17 gold badges123 silver badges144 bronze badges

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

5 Comments

Edward Over a year ago

This was the way i thought it was supposed to be done but still nothing. I will double check now. How can i make sure that formData contains any data?

Musa Over a year ago

There is no way to, you can check your network tab in your developer tools to see what the browser sends though.

Edward Over a year ago

Ok that is extreamly useful, this is what chrome says was sent:

------WebKitFormBoundarysPx8WQQBwHAQAkPc Content-Disposition: form-data; name="file"; filename="IMG_0061.JPG" Content-Type: image/jpeg   ------WebKitFormBoundarysPx8WQQBwHAQAkPc--

so i guess the image was sent? Now why is my script not receiving it :|

Edward Over a year ago

No it still dumps an empty array

Edward Over a year ago

This is the correct answer, after checking upload without ajax I found the image I was uploading was too large!

Ashwani Goyal · Accepted Answer · 2015-04-10 18:51:00Z

1

I don't see logo_upload id in your form.
When uploading a file enctype="multipart/form-data" is must in form attributes.
data parameter in your ajax getting a variable i.e. not defined. Look at your reference link once again.

Hope this would help you

answered Apr 10, 2015 at 18:51

Ashwani Goyal

6264 silver badges18 bronze badges

11 Comments

Edward Over a year ago

Hi, Thanks for your reply, i have tried this still now i am getting:

<pre class='xdebug-var-dump' dir='ltr'> <b>array</b> <i>(size=1)</i>   'file' <font color='#888a85'>=&gt;</font> <small>string</small> <font color='#cc0000'>'undefined'</font> <i>(length=9)</i> </pre>

Ashwani Goyal Over a year ago

#2 didn't help ? This one is the necessary part as well

Edward Over a year ago

Yes it helped i think because now i am getting 'undefined' rather than just 'empty'

Ashwani Goyal Over a year ago

I think you should try $("#logo_location").val() instead of $("#logo_location").get(0).files

Edward Over a year ago

I tried this, I now get 'C' instead of 'undefined'... this is from var_dump($_POST) by the way.

|

RNK · Accepted Answer · 2015-04-10 18:46:45Z

0

You are passing wrong variable here and you are not defining success in your ajax request:

$('#logo_upload').submit(function(e) {
e.preventDefault();
var formData = new FormData($('#your_form_id')[0]);

$.ajax({
    url: "../../../controllers/ajax_controller.php?action=image_upload",
    type: 'POST',
    data: formData,
    success: function(result){
        alert(result);
    }
    cache: false,
    contentType: false,
    processData: false
});
});

answered Apr 10, 2015 at 18:46

RNK

5,79211 gold badges71 silver badges143 bronze badges

Collectives™ on Stack Overflow

Image Upload to PHP Via Ajax

3 Answers 3

5 Comments

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related