web-dev-qa-db-ja.com

Chromeファイルアップロードのバグ：変更時に​​イベントが同じファイルで2回実行されない

私はこのhtml5ファイルアップローダープラグインに取り組んでいますが、Google Chromeにバグがあり、理解して修正することができません。 Firefoxでは正常に動作します。

jsfiddleリンク

問題は、デスクトップからcannot同じファイルをtwiceアップロードすることです。

最初にクリックして選択し、[OK]をクリックしてデスクトップからファイルをアップロードすると、メッセージが表示されます。たとえば、「。button-1」は、クリックしたアップロードボタンによって異なります。

次に、同じファイルを再度アップロードしようとすると、このコード行は実行されなくなります。

$(".upload-file",object_parent).change(function() {

             ...
             ...

             alert($cm.selector);

});

このプラグインで何がうまくいかないのですか？

(function($){

    // Attach this new method to jQuery
    $.fn.extend({ 

        // This is where you write your plugin's name
        upload_file_html5: function(options) {

            // Set the default values, use comma to separate the settings, example:
            var defaults = {
                objectSuperparent:    '.media'
            }

            var options =  $.extend(defaults, options);
            var o = options;

            var $cm = this.click(function(e){

                // <a> button is the object in this case.
                var object = $(this);

                // Get other info from the element belong to this object group.
                var object_href = object.attr('href');
                var object_parent = object.parent();
                alert($cm.selector);

                // Trigger the click event on the element.
                // Due to security policies triggering click on the input type=file is not allowed/supported in some browsers and Opera is one of them.
                //$('input[type=file]').trigger('click'); // or:
                $(".upload-file",object_parent).click();

                return false;

            });

            // Trigger ajax post when ever the file is changed by the user.
            var $cm_2 = $(".upload-file").change(function(){

                // <input> is the object in this case.
                var object = $(this);

                var object_form = object.parent();
                var object_superparent = object.parents(o.objectSuperparent);
                var path_config = $($cm.selector,object_superparent).attr('href');
                var path_post = object_form.attr('action');

                alert($cm.selector);
                //alert(path_config);

                ....
                ....

            });

        }
    });

})(jQuery);

Chromeで正常に動作していましたが、最近失敗しました。おそらくChromeが私のマシンの最新バージョンを更新し、この更新によってバグが発生しましたか？

jqueryhtmlgoogle-chromefile-uploadonchange
24
laukok

はい。私のChromeはFirefoxとは動作が異なりますが、Chromeは正しいと思います。

W3Cのドキュメント によると：

onchangeイベントは、コントロールが入力フォーカスを失い、フォーカスを取得してからその値が変更された場合に発生します。

同じファイルをアップロードしようとしても、ファイル入力の値は変わりません。印刷してみてください：

$('.button-2').click(function(){
    console.log($(".list .upload-file").val())
    return false;
});
18
Shellex Wai

2回アップロードする場合は、ファイル入力値をクリアします

$('input[type="file"]').val(null);

jsfiddleテスト

47
fundon

入力が再レンダリングされている可能性があります。どういうわけか、これは私にとっては無関係です。 $ .on（ 'change'、callback）機能は失われます。

私が絶対に大好きな.delegate関数を使ってみてください！ http://api.jquery.com/delegate/

さて、デリゲートはまったく同じです。特定のハンドルで画面にレンダリングされた要素があるかどうかをjqueryに通知し、それに機能をアタッチします。

したがって、要素が再レンダリングされても、機能し続けます。

$(document).delegate('.file_upload_btn', 'change', function(){});

これは使い捨て機能だと思うかもしれませんが、違いは何ですか。これにより、プロジェクトにかかる時間を大幅に節約できました。

2
A H Bensiali