使用AJAX和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?

Answer 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