5

jQueryファイルアップロードプラグインを使用しています。別のボタンをクリックすると、ファイル入力を非表示にしてアクティブにします。（このフィドルを参照してください。）

HTML：

<div>
    <button class="browse">Browse</button>
    <input id="upload" type="file" style="display: none;" />
</div>

JavaScript：

var element = $("#upload");

$(".browse").click(function () {
    $("#upload").trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
    }
});

ボタンを押してファイルを選択すると、addメソッドがアクティブになり、アラートが表示されることに注意してください。もう一度やり直すと、別のアラートが表示されます。

さて、このフィドルを見てください。唯一の違いは、次の行を変更したことです

$("#upload").trigger("click");

に

element.trigger("click");

ここで、最初にボタンをクリックしてファイルを選択すると、addメソッドがアクティブ化され、アラートが表示されます（以前と同様）が、もう一度実行しても、addメソッドはアクティブ化されないことに注意してください。

この動作の違いの原因は何ですか？

4

3 に答える 3

9

これは、ドキュメントに記載されているように、に設定replaceFileInputすることでも解決できます。これは、プラグインがアップロードのたびに入力要素を再作成するため、元の入力にバインドされたイベントが失われるためです。false

于 2014-07-30T10:40:52.163 に答える
6

elementadd関数の後でスコープが失われたり変更されたりしているように見えます。以下のようにリセットするとうまくいくようです。

var element = $("#upload");

$(".browse").click(function () {
    element.trigger("click");
});

element.fileupload({
    add: function () {
        alert("add");
        element = $(this);
    }
});

フィドル

于 2013-01-18T08:49:26.157 に答える
3

これを試してください：http：//jsfiddle.net/xSAQN/6/

var input = $("#upload");

$(".browse").click(function () {
    input.trigger("click", uploadit(input));
});

function uploadit(input){
    $(input).fileupload({
        add: function () {
            alert("add");
        }
    });
}

もう1つの方法がありますが：

これに変更するだけです：

   var element = $("#upload");

   $(".browse").click(function () {
       $("#upload").click(); // <----trigger the click this way
   });

   element.fileupload({
      add: function () {
          alert("add");
      }
   });
于 2013-01-18T08:36:45.567 に答える