0

次のように、jQuery と Ajax を組み合わせてユーザー アップロード フォームのフロントエンドを管理する場合:

$('form :button').click(function(){

    var formData = new FormData($("form")[0]);

    $.ajax({
        url: '/upload',
        type: 'POST',
        xhr: function() {
            myXhr = $.ajaxSettings.xhr();
            if(myXhr.upload){
                myXhr.upload.addEventListener('progress', progressHandlingFunction, false);
            }
            return myXhr;
        },
        data: formData,
        success: function (res) {
            alert("Uploaded");
        },
        cache: false,
        contentType: false,
        processData: false
    });
});

アップロードが完了するまですべてのブラウザの動きを停止したり、ページを離れるとアップロードが中断されることをユーザーに通知するasync:falseなど、ある種の jQuery 関数を使用したりすることは理にかなっていますか?beforeunload

$(window).bind('beforeunload', function(){
    return 'If you leave this page, your upload will not complete! Continue?';
});

この警告がファイルのアップロード中にのみ表示されるように、アップロードの進行中にのみ関数を実行するオプションが Ajax にありますか?

4

1 に答える 1

2

アップロード プロセスの開始時にフラグを保存することをお勧めします。

$('form :button').click(function(){

    var formData = new FormData($("form")[0]);
    var $this = $(this);
    $this.data('uploading', true);

    $.ajax({
       ..., // your attributes
       success: function (res) {
           $this.data('uploading', false);
           alert("Uploaded");
       },
    ... // rest of your code
});

次にbeforeunload

$(window).bind('beforeunload', function(){
    if($('form :button').data('uploading') === true) {
       return 'If you leave this page, your upload will not complete! Continue?';
    }
});
于 2012-05-11T02:12:54.307 に答える