Question

我正在尝试编写一个文件上传功能，它会在上传文件后返回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>

JQUERY

$(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;
            }
        }); 
    }
});

Answer 1

问题是你从 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();
            }
        });  
    }

Answer 2

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

var uploader = function(callback) {

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

用法

uploader(function (success) {
});

函数不会返回值

2 个答案: