javascript - AJAX 文件上传显示 PHP 输出而不是停留在页面上

Question

我正在尝试用PHP后端实现一个AJAX图片上传。我的问题是，无论何时用户提交表单，都会显示处理 PHP 的输出并且页面不会保持打开状态。 PHP 执行良好。

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;
});

虽然实际上传工作正常。

Answer 1

问题是在字段名为 “#fileToUpload” 时查找 '#FileInput'。就那么简单。更新的 jQuery 函数:

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
}
}