AJAX file upload shows PHP output instead of staying on page

Question

I'm trying to realize an AJAX picture upload with PHP backend. My problem is, that whenever the user submits the form, the handling PHPs output gets displayed and the page doesn't get to stay open. The PHP gets executed fine.

HTML:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//oss.maxcdn.com/jquery.form/3.50/jquery.form.min.js"></script>
    <script type="text/javascript" src="helpers/script.js" defer></script>

                <form action="helpers/upload.php" method="post" enctype="multipart/form-data" id="uploadForm">
                    <label class="w3-label">File (.gif, less than 8MB)</label><br>
                    <input name="fileToUpload" id="fileToUpload" class="w3-input" type="file"><br>
                    <input type="submit" id="formBtnUpload" class="w3-btn w3-ripple w3-dark-grey w3-hover-white" value="Upload">
                    <img src="helpers/spinnersmall.gif" id="formSpinner" style="display:none;" alt="Please Wait"/>
                </form>
                <div id="progressbox" class="w3-white">
                    <div class="w3-container w3-dark-grey w3-center" id="progressbar"></div>
                </div>

JQUERY:

$(document).ready(function() {
var $buttonbar = $('.buttonbar');
var options = {
    target:   '#output',          // target element(s) to be updated with server response
    beforeSubmit:  beforeSubmit,  // pre-submit callback
    success:       afterSuccess,  // post-submit callback
    uploadProgress: OnProgress,   //upload progress callback
    resetForm: true               // reset the form after successful submit
};

function beforeSubmit(){
    //check whether client browser fully supports all File API
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        var fsize = $('#FileInput')[0].files[0].size; //get file size
        var ftype = $('#FileInput')[0].files[0].type; // get file type
        //allow file types
        switch(ftype) {
            case 'image/gif':
                break;
            default:
                $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
            return false
        }
    //Allowed file size is less than 8 MB (1048576 = 1 mb)
    if(fsize > 8388608) {
        $("#output").html("<b>"+fsize+"</b><br>File is too big, it should be less than 8MB.");
        return false
    }
    } else {
        //Error for older unsupported browsers that doesn't support HTML5 File API
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
        return false
    }
}
function OnProgress(event, position, total, percentComplete){
    $('#formBtnUpload').addClass('w3-disabled');
    //Progress bar
    $('#progressbox').show();
    $('#progressbar').width(percentComplete + '%') //update progressbar percent complete
    $('#progressbar').html(percentComplete + '%'); //update status text
}
function afterSuccess() {
    $('#output').html("<b>Thank you.</b>");
    $('#progressbox').hide();
    $('#formBtnUpload').removeClass('w3-disabled');
}
$('#MyUploadForm').submit(function() {
    $(this).ajaxSubmit(options);           
    return false;
});

The actual upload works fine though.

This is a duplicate: http://stackoverflow.com/questions/5121495/php-code-is-not-being-executed-i-can-see-it-on-source-code-of-page. I've run out of close votes for the day, so this note will have to suffice! — miken32, Feb 19 '17 at 22:55
I see why you've run out of close votes for the day... This is not at all the same situation. Please take some time to actually read a question before classifying it. @miken32 — NotABlueWhale, Feb 19 '17 at 23:00
@miken32 it is not a dup. The user asked why their script wasn't executed at all. Mine gets executed. What me bothers is that it leaves the page to display the PHP output instead of staying in the page calling the AJAX. — traxx2012, Feb 19 '17 at 23:01
@NotABlueWhale "whenever the user submits the form, the handling PHP gets displayed" — miken32, Feb 19 '17 at 23:02
@miken32 my mistake. "The output of the handling PHP". The script GETS executed. Please refer to my previous comment. — traxx2012, Feb 19 '17 at 23:03
Ok, you should clarify your question to explain that. Makes for a much different question! — miken32, Feb 19 '17 at 23:04
What's `$(this).ajaxSubmit()` doing? It's not a jQuery function. — miken32, Feb 19 '17 at 23:09
@miken32 it's a handler of jQuery.forms plugin, handling the submit — traxx2012, Feb 19 '17 at 23:10
@NotABlueWhale waaaaay down in the html. I forgot to copy-paste it. And even if it wasn't there it shouldn't make such a huge impact, should it? — traxx2012, Feb 19 '17 at 23:13

score 0 · Accepted Answer · answered Feb 21 '17 at 01:52

The problem was lookign for '#FileInput' while the field was named '#fileToUpload'. Simple as that. Updated jQuery function:

function beforeSubmit(){
//check whether client browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob) {
    var fsize = $('#fileToUpload')[0].files[0].size; //get file size
    var ftype = $('#fileToUpload')[0].files[0].type; // get file type
    //allow file types
    switch(ftype) {
        case 'image/gif':
            break;
        default:
            $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
        return false
    }
//Allowed file size is less than 8 MB (1048576 = 1 mb)
if(fsize > 8388608) {
    $("#output").html("<b>"+fsize+"</b><br>File is too big, it should be less than 8MB.");
    return false
}
} else {
    //Error for older unsupported browsers that doesn't support HTML5 File API
    alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    return false
}
}

AJAX file upload shows PHP output instead of staying on page

1 Answers1