1

ファイルのアップロード後に 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>

Jクエリ

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

最善の策は、2 つのコールバック関数を渡すことです。1 つはアップロードが成功した場合に実行され、もう 1 つはアップロードが失敗した場合に実行されます。これにより、アップロードの結果に基づいて関数が 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 に答える