小粋空間  -  a cheap joke and a play on words site

jQuery.uploadプラグインで親要素のonsubmitを起動させない対処

以前紹介した「jQuery.uploadプラグイン」で、onsubmitを起動しない対処方法を紹介します。

１．「jQuery.uploadプラグイン」について

「jQuery.uploadプラグイン」はAjaxによるファイルのアップロードが行えるようにするためのプラグインです。

jQuery.upload

２．問題点

元のフォームにonsubmitなどのイベントがある場合、jQuery.uploadでファイルをアップロードするとonsubmitまで起動してしまいます。

具体的には、jQuery.uploadで選択したファイルをサーバにアップロードして、そこからファイル情報をJSONで取得してブラウザに表示させ、その内容がOKであれば本来のフォーム送信やファイルアップロードを行いたいのですが、最初のファイルアップロードでフォーム情報が送信されてしまいます。

元のフォームのonsubmitが起動される理由は、jQuery.uploadのファイルアップロードでは一時的にアップロード用のフォームを作成し、そこにsubmitを実行する仕組みになっているのですが、そのsubmitが親のform要素にあるonsubmitに伝播してしまうためです。

３．対処方法

この挙動で小1時間ほど悩んでいたのですが、配布サイトのコメント欄に対処方法があるのをみつけて無事解決しました。

ということで、本エントリーでも紹介しておきます。

「jQuery.upload 1.0.2」の場合、以下の赤色部分を追加してください。

…前略…
form.submit(function(event) {
    iframe.load(function() {
        var data = handleData(this, type),
            checked = $('input:checked', self);
 
        form.after(self).remove();
        checkbox.removeAttr('checked');
        checked.attr('checked', true);
        if (inputs) {
            inputs.remove();
        }
 
        setTimeout(function() {
            iframe.remove();
            if (type === 'script') {
                $.globalEval(data);
            }
            if (callback) {
                callback.call(self, data);
            }
        }, 0);
    });
    event.stopPropagation();
}).submit();
…後略…

「jQuery.upload 1.0.2（圧縮版）」の場合、以下の赤色部分を追加してください。最後の行の「event」の直前もセミコロンも忘れずにつけてください。

…中略…
i='<form target="'+h+'" method="post" enctype="multipart/form-data" />';if(b.isFunction(d)){c=a;a=d;d={}}j=b("input:checkbox",this);h=b("input:checked",this);i=f.wrapAll(i).parent("form").attr("action",e);j.removeAttr("checked");h.attr("checked",true);g=(g=m(d))?b(g).appendTo(i):null;i.submit(function(event){k.load(function(){var l=o(this,c),q=b("input:checked",f);i.after(f).remove();j.removeAttr("checked");q.attr("checked",true);g&&g.remove();setTimeout(function(){k.remove();c==="script"&&b.globalEval(l);
a&&a.call(f,l)},0)});event.stopPropagation()}).submit();return this}})(jQuery);

４．event.stopPropagation()について

３項で追加した「event.stopPropagation()」は、イベントのバブリングを停止するためのメソッドで、jQueryのAPIとして用意されています。

「イベントバブリング」とは、イベントを発生させた要素から親要素へ伝播することを指します。