1

我正在尝试编写一个文件上传函数，该函数将在上传文件后返回真或假。我目前能得到的唯一回报是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;
            }
        }); 
    }
});
4

2 回答 2

2

问题是您正在从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();
            }
        });  
    }
于 2012-08-19T02:46:04.397 回答
1

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

var uploader = function(callback) {

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

用法

uploader(function (success) {
});
于 2012-08-19T02:53:25.493 回答