Upload a file using AJAX and PHP

Question

I'm trying to make a script to upload files to my server.

What's really bothering me is that the success call is executed though the file is not uploaded.

HTML

<form action="processupload.php" method="post" enctype="multipart/form-data" id="MyUploadForm">
     <label>Castellà</label><input name="mapa_es" id="mapa_es" type="file" />
        <div id="progressbox_es" style="display:none;">
             <div id="progressbar_es">
                  <div id="statustxt_es">0%
                  </div>
             </div>
       </div>
</form>

JS

$(document).ready(function() {
                $('#mapa_es').change(function() {
                    var formData = (this.files[0]);
                    $.ajax({
                        xhr: function()
                        {
                            var xhr = new window.XMLHttpRequest();
                            xhr.upload.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
                                    console.log(percentComplete + '%');
                                    //Progress bar
                                    $('#progressbox_es').show();
                                    $('#progressbar_es').width(percentComplete + '%')
                                    $('#progressbar_es').css('background-color', '#6699FF');
                                    $('#statustxt_es').html(percentComplete + '%');
                                    if (percentComplete > 50)
                                    {
                                        $('#statustxt_es').css('color', '#000');
                                    }
                                }
                            }, false);
                            xhr.addEventListener("progress", function(evt) {
                                if (evt.lengthComputable) {
                                    var percentComplete = Math.floor((evt.loaded / evt.total) * 100);
                                    //Progress bar
                                    $('#progressbox_es').show();
                                    $('#progressbar_es').width(percentComplete + '%');
                                    $('#progressbar_es').css('background-color', '#6699FF');
                                    $('#statustxt_es').html(percentComplete + '%');
                                    if (percentComplete > 50)
                                    {
                                        $('#statustxt_es').css('color', '#000');
                                    }
                                    console.log(percentComplete + '%');
                                }
                            }, false);
                            return xhr;
                        },
                        url: 'processupload.php',
                        type: 'POST',
                        data: formData,
                        async: true,
                        beforeSend: function() {
                        },
                        success: function(msg) {
                            console.log(msg);
                        },
                        cache: false,
                        contentType: false,
                        processData: false
                    });
                    return false;
                });
            });

and the PHP code in processupload.php

<?php
if (isset($_FILES["mapa_es"]) && $_FILES["mapa_es"]["error"] == UPLOAD_ERR_OK) {
    $UploadDirectory = 'mapes/';

    if ($_FILES["mapa_es"]["size"] > 5242880) {
        echo "File size is too big!";
    }


    $File_Name = strtolower($_FILES['mapa_es']['name']);
    $File_Ext = substr($File_Name, strrpos($File_Name, '.'));
    $Random_Number = rand(0, 9999999999);
    $NewFileName = $Random_Number . $File_Ext;

    if (move_uploaded_file($_FILES['mapa_es']['tmp_name'], $UploadDirectory . $NewFileName)) {
        echo 'Success! File Uploaded.';
    } else {
        echo 'error uploading File!';
    }
} else {
    echo 'Something wrong with upload!';
}
?>

I will appreciate any help you could give me. Thanks.

EDIT: I followed gtryonp suggestions and I got into more problems. When I try to var_dump($_FILES) all I get is an empty string.

I also tried to submit the form using $().submit instead on $().change and it worked, I think it may be because of "enctype="multipart/form-data" on the form tag. Is there any way to achieve it without having to submit the whole form?

gtryonp · Accepted Answer · 2014-03-24 16:13:15Z

1

Your processupload.php is ending with a die(message) and will be take as a normal program end, so the success event will be fired and the console.log('FILE UPLOADED') will be your response always, even in error cases. Change all your die(message) with echo message, something like:

if (move_uploaded_file($_FILES['mapa_es']['tmp_name'], $UploadDirectory . $NewFileName)) {
echo 'Success! File Uploaded to '.$UploadDirectory . $NewFileName;
} else {
echo 'error uploading File!';
}
...

and change the success function for something that echoes the possible answers to your screen. Something like:

success: function(msg) {
console.log(msg);
},

HAGD

answered Mar 24, 2014 at 16:13

gtryonp

4075 silver badges13 bronze badges

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

4 Comments

gbestard Over a year ago

ok thanks, I did it and i get "Something wrong with upload!" so I know where is it failing, but I don't know what could I do to solve it.

gbestard Over a year ago

post_max_size and upload_max_filesize in php.ini are ok

gtryonp Over a year ago

there are several possibilities. My usual suspects: carpet exists (look closely)? rights/access to the carpet? filename well formatted?

gbestard Over a year ago

The folder exists and the web server has writing permisions to it. I'm trying to var_dump($_FILES) and all I get is an empty string

Collectives™ on Stack Overflow

Upload a file using AJAX and PHP

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related