What's wrong between my Javascript and PHP communication for uploading an image?

Question

I was requested to use only Javascript (Ajax/Jquery/JSON) only. Why doesn't this work?

Here's my code that I embedded in HTML script:

function uploadImage(){
    $.post("signup/upload.php", function(data)
    {
        if(data['status']!='ok'){
          $("#status").html(data['status']);
          console.log("!Failure");
        }else{
          $('#status').html("Your picture was uploaded!");
          console.log("Success");
        }
    });
}

$(document).ready(function () {
    $('#uploadImageButton').on('click', function()
    {
        uploadImage();
    });
});

Here is the HTML:

<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Submit" id = "uploadImageButton" name="submit">

Here is the PHP:

  $reply['status'] = 'ok';
    <?php
    if(isset($_POST['submit'])) {
            if (isset($_FILES['upload'])) {
                    $allowed = array ('image/pjpeg', 'image/jpeg','image/JPG');
                    if (in_array($_FILES['upload']['type'], $allowed)) {
                            if (move_uploaded_file
                                    ($_FILES['upload']['tmp_name'], "/fakepath/www/upload_files/{$_FILES['upload']['name']}"))
                            {
                                    $reply['status'] = 'ok';
                                    echo '<p><em>The file has been uploaded!</em></p>';
                            }

                    } else {
                            echo '<p class="error">Please upload a JPEG or PNG image.</p>';
                    }
        }
}
print json_encode($reply);
?>

What about it "doesn't work"? Is the request being made to the server? Is the server responding? Is the image not being saved? — Mike Cluck, Feb 25 '16 at 20:35
You need to use FormData API to upload files using ajax or you have to base 64 encode them — charlietfl, Feb 25 '16 at 20:43
You're not sending any data to the server in your `$.post()` call. — Barmar, Feb 25 '16 at 20:50
Read the documentation of `$.post`. The second argument is the `data` to be sent to the server. But you can't use that for file uploads, see the answers in the duplicate question. — Barmar, Feb 25 '16 at 20:56

Zakaria Acharki · Accepted Answer · 2016-02-25T22:26:32.000

0

You should use $.ajax request, e.g below.

HTML :

<form enctype="multipart/form-data">
    <input type="file" name="upload" id="fileToUpload">
    <input type="submit" value="Submit" id = "uploadImageButton" name="submit">
<form>

JS :

$(function(){
    $('body').on('submit', 'form', function(e){
        e.preventDefault();

        $.ajax({
            type: "POST",
            url: "signup/upload.php",
            data: new FormData(this),
            cache: false,
            contentType: false,
            processData: false,
            success: function (data) {
                //your code
            }
        });

        return false;
    })  
})

Hope this helps.

edited Feb 25 '16 at 22:26

answered Feb 25 '16 at 20:36

Zakaria Acharki

66,747
15
75
101

it's not that simple and requires different options in `$.ajax` – charlietfl Feb 25 '16 at 20:38
Hmm I get "Uncaught TypeError: Illegal invocation" – Dil Feb 25 '16 at 20:44
note that second version will only send the file name which is what `val()` will return – charlietfl Feb 25 '16 at 20:53
Thanks @charlietfl for your intervention, updated my answer. – Zakaria Acharki Feb 25 '16 at 20:54
_note that second version will only send the file name_ Ok @charlietfl any suggestion? – Zakaria Acharki Feb 25 '16 at 20:54
1

yes..need to use FormData APi... and not allow data processing – charlietfl Feb 25 '16 at 20:55
Thanks @charlietfl updated my answer please take a look. – Zakaria Acharki Feb 25 '16 at 20:58
1

untested but seems about right – charlietfl Feb 25 '16 at 21:00
@Dil check my update please. – Zakaria Acharki Feb 25 '16 at 21:00
I really appreciate the help but still nothing. I still get !Failure. I embedded all of your code inside "uploadImage();" and removed all of mine. – Dil Feb 25 '16 at 21:03
@Dil won't ever get past `isset($_POST['submit']` – charlietfl Feb 25 '16 at 21:04
@charliefl You're absolutely right. Why though? – Dil Feb 25 '16 at 21:06
Because we're not sending any parameter called `submit`. – Zakaria Acharki Feb 25 '16 at 21:07
because it doesn't exist unless you append to data. Also you echo html in one place and json in another. php needs cleaning up – charlietfl Feb 25 '16 at 21:07
Yeah the echoing was just for testing purposes. So how do I append it? – Dil Feb 25 '16 at 21:09
1

You should remove the `if(isset($_POST['submit'])) {` condition, and check what will happen. – Zakaria Acharki Feb 25 '16 at 21:10
There is no difference! This has gotten me stumped. – Dil Feb 25 '16 at 21:13
Okay i'll test it localy right now, just wait. – Zakaria Acharki Feb 25 '16 at 21:15
@Dil when you call your JS code (onclick, onsubmit..)? – Zakaria Acharki Feb 25 '16 at 21:23
On click and thanks by the way for the help – Dil Feb 25 '16 at 21:28
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/104583/discussion-between-zakaria-acharki-and-dil). – Zakaria Acharki Feb 25 '16 at 21:28

score 0 · Answer 2 · answered Feb 25 '16 at 20:38

0

First PHP instruction $reply['status'] = 'ok'; would not execute because it is placed before PHP open tag.

answered Feb 25 '16 at 20:38

kshpolvind

91
4

What's wrong between my Javascript and PHP communication for uploading an image?

2 Answers2