Validation Can'；t使用jQuery表单插件阻止验证失败时的文件上载

这是我的表格：

<form id="frmUpload" action="../scripts/upload.php" method="post" enctype="multipart/form-data">
    <div id="sermonInfo">
        File: <input type="file" id="uploadedFile" name="uploadedFile" class="error"><br>
        <br>
        Title: <input type="text" id="title" name="sermonTitle" size="35" maxlength="100">
    </div>
</form>
<div id="uploadInfo">
    <div class="progress">
        <div class="statusBar" style="width: 0%;"></div>
        <div class="percent">0%</div>
    </div>

    <div id="status"></div>
    <br>
    <div id="required">Only mp3 files are allowed!</div>
</div>

文件：



标题：
0%


只允许使用mp3文件！

下面是我正在使用的JS：

<script>
    $(function() {
        /*
         * Upload
         */
        // Reset validation and progress elements
        var formValid = true,
            percentVal = '0%';
        $('#uploadedFile, #title').removeClass('error');
        $('#status, #required').empty().removeClass();
        $('.statusBar').width(percentVal)
        $('.percent').html(percentVal);

        $('form').ajaxForm({
            beforeSend: function(e) {

                if (!ValidateUploadForm()) {
                    formValid = false;
                    console.log('validateuploadform returned false');
                } else {
                    console.log('validateuploadform returned true');
                    formValid = true;
                }

                console.log('in beforeSend. formValid: ' + formValid);

                if (!formValid) {
                    return false;
                }

            },
            uploadProgress: function(event, position, total, percentComplete) {
                console.log('in uploadProgress function. formValid: ' + formValid);
                if (formValid) {
                    var percentVal = percentComplete + '%';
                    $('.statusBar').width(percentVal)
                    $('.percent').html(percentVal);    
                }
            },
            complete: function(xhr) {
                console.log('in complete function. formValid: ' + formValid);
                if (formValid) {
                    console.log('xhr.responseText: ' + xhr.responseText);
                    console.log('formValid: ' + formValid);

                    if (xhr.responseText === 'success') {
                        $('.statusBar').width('100%');
                        $('.percent').html('100%');
                        $('#status').html('Successfully uploaded the file.').addClass('successUpload');

                        // Clear the form
                        ClearForm();

                    } else if (xhr.responseText === 'fail') {
                        $('#status').html('There was a problem uploading the file. Try again.<br>If the problem persists, contact your system administrator.').addClass('errorUpload');
                    }
                }
            }
        }); // End Upload Status Bar
    });

    function ValidateUploadForm() {
        // Reset errors and clear message
        $('#uploadedFile, #title').removeClass('error');
        $('#required').empty();

        var result = true;
            title = $('#title').val(),
            fileName = $('#uploadedFile').val();
            extension = $('#uploadedFile').val().split('.').pop();

        if (fileName !== '' && extension !== 'mp3') {
            $('#uploadedFile').addClass('error');
            $('#required').html('Only mp3 files are allowed!');
            return false;
        } else if (fileName === '') {
            result = false;
        } else if (title === '') {
            $('#title').addClass('error');
            result = false;
        }

        console.log('returning ' + result + ' from the validateuploadform function');

        if (!result) { $('#required').html('All fields are required.'); }
            return result;
        }

        function ClearForm() {
            $('#uploadedFile, #title').val('').removeClass();
    }
</script>

$（函数（）{
/*
*上传
*/
//重置验证和进度元素
var formValid=true，
percentVal='0%'；
$（'#uploadedFile，#title'）.removeClass（'error'）；
$（“#状态，#必需”）.empty（）.removeClass（）；
$（'.statusBar'）.width（percentVal）
$（'.percent'）.html（percentVal）；
$（'form'）.ajaxForm({
发送前：函数（e）{
如果（！ValidateUploadForm（））{
formValid=false；
log（'validateuploadform返回false'）；
}否则{
log（'validateuploadform返回true'）；
formValid=true；
}
console.log（'in beforeSend.formValid:'+formValid）；
如果（！formValid）{
返回false；
}
},
上载进度：功能（事件、位置、总数、完成百分比）{
console.log（'in uploadProgress function.formValid:'+formValid）；
如果（格式有效）{
var percentVal=percentComplete+“%”；
$（'.statusBar'）.width（percentVal）
$（'.percent'）.html（percentVal）；
}
},
完成：函数（xhr）{
console.log（'in complete function.formValid:'+formValid）；
如果（格式有效）{
log（'xhr.responseText:'+xhr.responseText）；
log（'formValid:'+formValid）；
如果（xhr.responseText=='success'）{
$（'.statusBar'）.width（'100%）；
$（'.percent'）.html（'100%）；
$（'#status'）.html（'已成功上载文件'）.addClass（'成功上载'）；
//清除表格
ClearForm（）；
}else if（xhr.responseText=='fail'）{
$（“#status'）.html（'上载文件时出现问题。请重试。
如果问题仍然存在，请与系统管理员联系。'）。addClass（'错误上载'）；
}
}
}
})；//结束上载状态栏
});
函数ValidateUploadForm（）{
//重置错误并清除消息
$（'#uploadedFile，#title'）.removeClass（'error'）；
$（“#必需”）.empty（）；
var结果=真；
title=$（'#title'）.val（），
fileName=$（'#uploadedFile'）.val（）；
扩展名=$（'#uploadedFile'）.val（）.split（'.'）.pop（）；
如果（文件名！=''&&extension！=='mp3'）{
$（'#uploadedFile'）.addClass（'error'）；
$（“#必需”）.html（'只允许mp3文件！'）；
返回false；
}else if（文件名==''）{
结果=假；
}否则如果（标题==''）{
$（'#title'）.addClass（'error'）；
结果=假；
}
log（'从validateuploadform函数返回'+result+'）；
if（！result）{$（'#required'）.html（'所有字段都是必需的。'）；}
返回结果；
}
函数ClearForm（）{
$（'#uploadedFile，#title'）.val（''.removeClass（）；
}

如您所见，我正在使用控制台输出来监视正在发生的事情

我的问题是，如果选择了一个文件，无论formValid（在beforeSend中）是true还是false，该文件仍然会上载

我尝试在返回false之前添加preventDefault。我还尝试清除

if（！formValid）{}

块中的文件输入。如您所见，我包装了

uploadProgress

和

complete

函数，以检查formValid是否为false。如果uploadProgress中的控制台输出显示formValid为false，则文件仍会上载

---

我错过了什么？如果验证失败，如何防止文件上载？

基本上，您可能缺少

jquery.form.js

扩展名。如果没有JavaScript控制台输出，我只能猜测这应该是问题所在。请尝试以下（整个）页面作为参考，停止上载将起作用：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript">
</script>
<script src="http://malsup.github.com/jquery.form.js" type="text/javascript">
</script>
<style type="text/css">
 div.c1 {width: 0%;}
</style>
</head>
<body>
<form id="frmUpload" action="%3C?php%20basename(__FILE__,%20'.php');%20?%3E" method="post" enctype="multipart/form-data" name="frmUpload">
<div id="sermonInfo">File: <input type="file" id="uploadedFile" name="uploadedFile" class="error"><br>
<br>
Title: <input type="text" id="title" name="sermonTitle" size="35" maxlength="100"></div>
<input type="submit" value="Submit"></form>
<div id="uploadInfo">
<div class="progress">
<div class="statusBar c1"></div>
<div class="percent">0%</div>
</div>
<div id="status"></div>
<br>
<div id="required">Only mp3 files are allowed!</div>
</div>
<script type="text/javascript">
    $(function() {
        /*
         * Upload
         */
        // Reset validation and progress elements
        var formValid = true,
            percentVal = '0%';
        $('#uploadedFile, #title').removeClass('error');
        $('#status, #required').empty().removeClass();
        $('.statusBar').width(percentVal)
        $('.percent').html(percentVal);

        $('form').ajaxForm({
            beforeSend: function(e) {

                if (!ValidateUploadForm()) {
                    formValid = false;
                    console.log('validateuploadform returned false');
                } else {
                    console.log('validateuploadform returned true');
                    formValid = true;
                }

                console.log('in beforeSend. formValid: ' + formValid);

                if (!formValid) {
                    return false;
                }

            },
            uploadProgress: function(event, position, total, percentComplete) {
                console.log('in uploadProgress function. formValid: ' + formValid);
                if (formValid) {
                    var percentVal = percentComplete + '%';
                    $('.statusBar').width(percentVal)
                    $('.percent').html(percentVal);    
                }
            },
            complete: function(xhr) {
                console.log('in complete function. formValid: ' + formValid);
                if (formValid) {
                    console.log('xhr.responseText: ' + xhr.responseText);
                    console.log('formValid: ' + formValid);

                    if (xhr.responseText === 'success') {
                        $('.statusBar').width('100%');
                        $('.percent').html('100%');
                        $('#status').html('Successfully uploaded the file.').addClass('successUpload');

                        // Clear the form
                        ClearForm();

                    } else if (xhr.responseText === 'fail') {
                        $('#status').html('There was a problem uploading the file. Try again.<br>If the problem persists, contact your system administrator.').addClass('errorUpload');
                    }
                }
            }
        }); // End Upload Status Bar
    });

    function ValidateUploadForm() {
        // Reset errors and clear message
        $('#uploadedFile, #title').removeClass('error');
        $('#required').empty();

        var result = true;
            title = $('#title').val(),
            fileName = $('#uploadedFile').val();
            extension = $('#uploadedFile').val().split('.').pop();

        if (fileName !== '' && extension !== 'mp3') {
            $('#uploadedFile').addClass('error');
            $('#required').html('Only mp3 files are allowed!');
            return false;
        } else if (fileName === '') {
            result = false;
        } else if (title === '') {
            $('#title').addClass('error');
            result = false;
        }

        console.log('returning ' + result + ' from the validateuploadform function');

        if (!result) { $('#required').html('All fields are required.'); }
            return result;
        }

        function ClearForm() {
            $('#uploadedFile, #title').val('').removeClass();
    }
</script>
</body>
</html>

确保表单也接受

MP3

，因为这在野外也比较常见

如果这不能解决您的问题，那么如果您可以上传一个有问题的页面的完整HTML，这将有所帮助

更新

关于上传的文件，您在

testUpload.php

的第91行有一个简单的输入错误：

if ((fileName === '') || (extension !== 'mp3'))

应该是

if ((fileName === '') || (extension !== 'mp3')) {

---

我终于解决了这个问题：我将我的脚本与一些在线示例进行比较，发现示例的回调名为

beforesmit

，但我使用的是

beforeSend

---

奇怪的是，验证代码仍在执行，但返回false并没有停止上传。

我真的需要一些帮助，伙计们！感谢您回答并提供测试代码。我远程包含表单脚本，就像您在测试代码中所做的那样，但是当我使用表单脚本在本地创建文件时，它的工作方式不同——不一定正确。验证失败时不会上载文件，但现在正在浏览器中加载操作文件。这是我不可能做到的——显然，我需要停留在上传表单的页面上。你的测试上传表单也做同样的事情。有什么想法吗？你确定你实际上在本地使用相同的脚本吗？这可能是由于实际使用了不同的脚本，或者在DOM中的

jquery

脚本之前加载了它

if ((fileName === '') || (extension !== 'mp3')) {