函数不会返回值

function will not return a value

本文关键字：返回值 函数      更新时间：2023-09-26

我正在尝试编写一个文件上传函数，该函数在上传文件后将返回 true 或 false。我目前能得到的唯一回报是undefined。我已经尝试了代码的一些变体，但我无法弄清楚。我相信这是一个延迟或范围问题，但不太确定。看看，告诉我你们的想法。

.HTML

<div id="add-form"> 
    make : <input type="text" id="make" name="make" />
    type : <input type="text" id="type" name="type" />
    caliber : <input type="text" id="caliber" name="caliber" />
    cost : <input type="text" id="cost" name="cost" />
    description : <textarea id="description"></textarea>
    <form id="image-form">
        image : <input type="file" id="image" name="image" />
    </form>
    <button id="add-item">ADD ITEM</button> 
 </div>

简讯

$(function()
{
    $('#add-item').click(function()
    {
        console.log(uploader());
    });
    var uploader = function uploader()
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("body").append(iframe);
        var form = $('#image-form');
        form.attr("action","hub.php?handler=image");
        form.attr("method","post");
        form.attr("enctype","multipart/form-data");
        form.attr("encoding","multipart/form-data");
        form.attr("target","postiframe");
        form.attr("file",$('#image').val());
        form.submit();
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                return true;
            }
            else
            {
                return false;
            }
        }); 
    }
});

问题是你从 ajax 回调返回一个值

$("#postiframe").load(function() {
     // ...
     return true;

当到达这行代码时，原始函数已经终止，不返回任何内容，这当然计算为undefined 

var uploader = function uploader()
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                //function has already ended by this point!
                return true;
            }
            else
            {
                //function has already ended by this point!
                return false;
            }
        }); 
        //you need to return something HERE 
    }

我想说你最好的选择是传入两个回调函数，一个在上传成功时运行，另一个在上传失败时运行。 这不会让你达到函数根据上传结果返回 true 或 false 的程度，但它将允许您根据上传是否成功指定要运行的代码 

var uploader = function uploader(successCallback, failureCallback)
    {
        var iframe = $('<iframe name="postiframe" id="postiframe" style="display:none" />');
        $("#postiframe").load(function()
        {
            var _frame = $("#postiframe").contents().find('body').html();
            var obj = $.parseJSON(_frame);
            if(obj['status']==true)
            {
                if (typeof successCallback === 'function')
                    successCallback();
            }
            else
            {
                if (typeof failureCallback === 'function')
                    failureCallback();
            }
        });  
    }

解决方案是你应该实现一个回调模式来处理异步性质。 这里过于简单化了。

var uploader = function(callback) {
    $("postiframe").load(function () {
        // success
        callback(true);
    });
};

用法

uploader(function (success) {
});
相关文章：