Question

我的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所指出的那样，控制台输出的顺序表明我需要在我的$ .ajax调用中添加async: false。执行此操作后，控制台输出是正确的，但函数CheckFileExists（）仍然在beforeSubmit中报告为未定义。

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

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

Answer 2

确定。现在的问题是回报的范围。如果你使用“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中变量范围的内容：What is the scope of variables in JavaScript?

这不是一个很好的解决方案;如果你在ajax调用的“success”函数中调用一个函数作为我之前的例子，那就更好了。

这就是所有人！

由jQuery Form Plugin调用的函数beforeSubmit不返回值

2 个答案: