1

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?

George Kagan
  • 5,913
  • 8
  • 46
  • 50
necroface
  • 3,365
  • 10
  • 46
  • 70
  • 1
    why are you using this: contentType: false, processData: false, ? – Aschab Oct 15 '16 at 18:39
  • @Aschab I searched for how to upload image file and they guide me to use those options – necroface Oct 15 '16 at 18:40
  • @Aschab Indeed without those options image cannot be uploaded – necroface Oct 15 '16 at 18:44
  • Try entering directly to `upload.php`. If you see the code, try following those instructions: http://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-instead-code-shows-on-the-page – Vlad Gincher Oct 15 '16 at 18:53
  • 1
    If it returns the PHP code unparsed, the parser isn't running. You have to actually run PHP *(the program)* on the server. – adeneo Oct 15 '16 at 19:01
  • what happens when you run `php upload,php` from the terminal? Does it echo the error that `echo 'Error: ' . $_FILES['file']['error'] . '
    ';` is supposed to return?     – foecum Oct 15 '16 at 19:06

1 Answers1

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:

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!

motanelu
  • 3,945
  • 1
  • 14
  • 21
  • I'm using Ubuntu. LAMP stack is already installed and still runs normally (Apache running on port 80, `php -v` still echoes...) – necroface Oct 15 '16 at 19:18
  • 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 http://localhost/info.php should display the php configuration like in this image - https://wiki.gandi.net/_media/en/hosting/using-linux/tutorials/phpinfo.jpg . Anything else means your php installation is not not working. Did you sudo apt-get install libapache2-mod-php? – motanelu Oct 15 '16 at 20:56
  • Did you try the phpinfo() test? Does it work as expected? – motanelu Oct 16 '16 at 08:08
  • No, it does not. I tried uninstalling and reinstalling apache2 and php5 on Ubuntu in vain. But when I do on Windows, it works – necroface Oct 16 '16 at 08:21
  • What version of Ubuntu do you have? – motanelu Oct 16 '16 at 08:22
  • My Ubuntu version is 14.04 – necroface Oct 16 '16 at 08:30
  • Try this: `sudo apt-get update` then `sudo apt-get install tasksel` and in the end `sudo tasksel install lamp-server` or follow the tutorial here: https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-on-ubuntu-14-04 – motanelu Oct 16 '16 at 08:38
  • I followed all of them in vain, so I decided to switch to Windows for this – necroface Oct 16 '16 at 08:41