PHP echo jQuery AJAX request

Question

This is my jQuery request to upload an image file

$('#upload-image').change(function(e){
    var file = e.target.files[0];
    var imageType = /image.*/;
    if (!file.type.match(imageType))
        return;
    console.log(file);
    var form_data = new FormData();
    form_data.append('file', file);
    console.log(form_data);
    $.ajax({
        url: 'http://localhost/upload.php',
        cache: false,
        contentType: false,
        processData: false,
        data: form_data,
        type: 'POST',
        success: function(response){
            console.log(response);
        },
        error: function(error){
            console.log(error);
        }
    });
});

This is upload.php on local webserver

<?php
    header('Access-Control-Allow-Origin: *');
    if ( 0 < $_FILES['file']['error'] ) {
        echo 'Error: ' . $_FILES['file']['error'] . '<br>';
    }
    else {
        move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . $_FILES['file']['name']);
        $target_path = $_SERVER['DOCUMENT_ROOT'] . "/uploads/" . $_FILES['file']['name'];
        echo $target_path;
    }
?>

When I upload the image and send request. It returns and logs for me complete code lines of upload.php, not the result from echo command line that I want. I check console Network tab and see that the response is nothing except complete code of upload.php. It truly does not handle anything server-side. What did I do wrong?

why are you using this: contentType: false, processData: false, ? — Aschab
– Aschab, Commented Oct 15, 2016 at 18:39
@Aschab I searched for how to upload image file and they guide me to use those options — necroface
– necroface, Commented Oct 15, 2016 at 18:40
@Aschab Indeed without those options image cannot be uploaded — necroface
– necroface, Commented Oct 15, 2016 at 18:44
Try entering directly to upload.php. If you see the code, try following those instructions: stackoverflow.com/questions/5121495/… — Vlad Gincher
– Vlad Gincher, Commented Oct 15, 2016 at 18:53
If it returns the PHP code unparsed, the parser isn't running. You have to actually run PHP (the program) on the server. — adeneo
– adeneo, Commented Oct 15, 2016 at 19:01

motanelu · Accepted Answer · 2016-10-15 21:37:37Z

3

You need to make sure that PHP runs server-side. If there's no PHP handler installed, the server will return the content of your upload.php file as text. I think that's your primary problem.

Based on your platform, you may try:

http://www.wampserver.com/en/ (windows)
https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-14-04 (Ubuntu)
https://www.mamp.info/en/ (MacOS)

First of all make sure your PHP works, by creating a file called info.php in your webroot folder with the following content

<?php
phpinfo();

This should display your configuration. Then you can start debugging the Javascript. The content type should by multipart/form-data so that the server knows it expects an upload.

Good luck!

edited Oct 15, 2016 at 21:37

answered Oct 15, 2016 at 18:58

motanelu

4,0251 gold badge16 silver badges21 bronze badges

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

8 Comments

necroface Over a year ago

I'm using Ubuntu. LAMP stack is already installed and still runs normally (Apache running on port 80, php -v still echoes...)

motanelu Over a year ago

It's not about whether php works in the command line, but rather if it works on the server. If you've kept the standard paths in Ubuntu, create a file /var/www/info.php with the content explained above and going to localhost/info.php should display the php configuration like in this image - wiki.gandi.net/_media/en/hosting/using-linux/tutorials/… . Anything else means your php installation is not not working. Did you sudo apt-get install libapache2-mod-php?

motanelu Over a year ago

Did you try the phpinfo() test? Does it work as expected?

necroface Over a year ago

No, it does not. I tried uninstalling and reinstalling apache2 and php5 on Ubuntu in vain. But when I do on Windows, it works

motanelu Over a year ago

What version of Ubuntu do you have?

|

Collectives™ on Stack Overflow

PHP echo jQuery AJAX request

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related