3

这是我的表格：

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

这是我正在使用的 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>

如您所见，我正在使用控制台输出来密切关注正在发生的事情。

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

我之前尝试过添加 preventDefault return false;。我也尝试过清除if (!formValid) {}块中的文件输入。如您所见，我已经包装了uploadProgressandcomplete函数来检查 formValid 是否为假。如果 uploadProgress 中的控制台输出显示 formValid 为false，则文件仍会上传。

我在这里想念什么？如果验证失败，如何防止文件上传？

4

2 回答 2

3

我终于弄清楚了这个问题：我正在将我的脚本与一些在线示例进行比较，并注意到示例的回调名为beforeSubmit，但我使用的是beforeSend.

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

于 2013-04-26T09:51:53.540 回答
1

基本上，看起来您可能缺少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>

作为旁注，您可能想要使用

extension = $('#uploadedFile').val().split('.').pop().toLowerCase();

确保表单也接受MP3，因为这在野外也经常看到。

如果这不能解决您的问题，如果您可以上传相关页面的完整 HTML，将会有所帮助。

更新

关于上传的文件，您在第 91 行有一个简单的错字testUpload.php：

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

应该

if ((fileName === '') || (extension !== 'mp3')) {
于 2013-04-23T21:08:24.267 回答