5

我正在使用jQuery File Upload 插件。我正在隐藏文件输入并在单击单独的按钮时激活它。（见这个小提琴。）

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

看起来好像element在添加功能之后范围正在丢失/更改。像下面这样重置它似乎有效。

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");
        }
    });
}

虽然还有另一种方法：

改成这样：

   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 回答