0

我的 jQuery Form 插件中的 beforeSubmit 函数需要检查所选文件是否已存在于服务器上。这是相关的代码：

$('#frmSermonUpload').ajaxForm({
    beforeSubmit: function() {
        // Reset errors and clear messages
        ClearForm(false);
        var formValid = true,
            fileExists = CheckFileExists();

        console.log('beforeSubmit fileExists: ' + fileExists);

        if (fileExists === 'true') {
            $('#uploadedFile').addClass('inputError');
            $('#fileErrorMsg').append('  A file with that name already exists on the server.');
            formValid = false;
        } else {
            if (!ValidateUploadForm()) {
                formValid = false;
            }
        }

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

        if (!formValid) {
            return false;
        }

    },
    ...

这是 CheckFileExists() 函数：

function CheckFileExists() {

    var fileName = $('#uploadedFile').val().replace(/C:\\fakepath\\/i, ''),
        dataString;

    dataString = 'checkFileExists=' + fileName;

    console.log('fileName: ' + fileName);
    console.log('dataString: ' + dataString);

    $.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        success: function(serverResult) {
            console.log('serverResult: ' + serverResult);

            if (serverResult === 'existsTrue') {
                return 'true';
            } else {
                return 'false';
            }

        },
        error: function(xhr, status, error) {
            alert('An error occurred while attempting to determine if the selected file exists. Please try again.);
        }
    });

    //console.log('Current value of returnResult: ' + returnResult);
    //return returnResult;
}

如您所见，我正在使用控制台输出来检查发生了什么。在 CheckFileExists() 函数中，正确报告了 fileName 和 dataString。在 PHP 方面，我知道 POST 数据正在到达那里，因为我在那里进行了一些日志记录。

这是使用 POST 数据的 PHP 代码：

if (isset($_POST['checkFileExists']) && $_POST['checkFileExists'] !== '') {
    $log->lwrite('**Checking if file exists.**');

    $fileToCheck = $targetPath . $_POST['checkFileExists'];

    $log->lwrite('file_exists: ' . file_exists($fileToCheck));

    if (file_exists($fileToCheck)) {
        echo 'existsTrue';
    } else {
        echo 'existsFalse';
    }
}

正在发生的事情是，在控制台中，该行console.log('beforeSubmit fileExists: ' + fileExists);返回“未定义”（beforeSubmit fileExists: undefined）。

这是文件已存在的上传的所有控制台输出，因此应该停止 beforeSubmit：

fileName: 042913sermon.mp3 dataString; checkFileExists=042913sermon.mp3 beforeSubmit fileExists: undefined formValid: true serverResult: existsTrue

在其他所有内容之后显示该serverResult行必须很重要。这与ajax调用需要多长时间有关吗？如果是这样，有没有办法延迟脚本的其余部分，直到 ajax 调用完成执行？

更新 正如 aorlando 所指出的，控制台输出的顺序表明我需要添加async: false到我的 $.ajax 调用中。这样做之后，控制台输出是正确的，但函数 CheckFileExists() 仍然在 beforeSubmit 中报告为未定义。

4

2 回答 2

1

您正在使用 AJAX 异步调用。您的方法 CheckFileExists()n 在 ajax 调用完成之前返回一个值。所以最简单的解决方案是使用：

 $.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        async: false ...

如果你想使用异步调用（你可以看到的默认值：http: //api.jquery.com/jQuery.ajax/ 你必须在ajax调用的成功函数中调用（例如）一个postcall函数：

success: function(serverResult) {
        console.log('serverResult: ' + serverResult);

        if (serverResult === 'existsTrue') {
            postFn('true');

        } else {
            postFn('false');
        }

    }, ...

注意 postFn 的范围

funcion postFn(_result){
    console.log(_result);
}

我希望清楚。这就是所有的人！

于 2013-05-07T15:49:56.843 回答
1

行。现在的问题是退货的范围。如果你使用“async: false”你可以用这种方式返回（不是那么优雅）

var returnValue='';
$.ajax({
        type: 'POST',
        url: '../scripts/sermonUpload.php',
        data: dataString,
        async: false,
        success: function(serverResult) {
            console.log('serverResult: ' + serverResult);

            if (serverResult === 'existsTrue') {
               returnValue = 'true';

            } else {
                returnValue= 'false';
            }

        },
        error: function(xhr, status, error) {
            alert('An error occurred while attempting to determine if the selected file                           exists. Please try again.);
        }
    });
return returnValue;

您必须在 ajax 调用范围之外声明一个 var returnValue。在ajax函数内部可以修改returnValue的值；这是一个使用闭包的解决方案，一个非常复杂的 JavaScript 功能。进一步阅读有关 javascript 中变量范围的内容：JavaScript 中变量的范围是什么？

这不是一个很好的解决方案；如果您像我之前的示例那样在 ajax 调用的“成功”函数中调用一个函数会更好。

这就是所有的人！

于 2013-05-07T17:03:58.827 回答