Question

我正在使用jQuery File Upload plugin。我正在隐藏文件输入并在单击一个单独的按钮时激活它。（见this fiddle。）

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方法已激活，您将收到提醒。再做一次，你会得到另一个警报。

现在，请参阅this fiddle。唯一的区别是我改变了以下行

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

到

element.trigger("click");

请注意，现在，当您第一次单击按钮然后选择一个文件时，add方法被激活并且您获得警报（就像之前一样），但是如果再次执行，{{1方法永远不会激活。

造成这种行为差异的原因是什么？

Answer 1

这也可以通过将replaceFileInput设置为false来解决，如documentation所述。这是因为插件在每次上传后都会重新创建输入元素，因此绑定到原始输入的事件将会丢失。

Answer 2

在添加函数之后，element的范围似乎丢失/更改。如下所示重置它似乎有效。

var element = $("#upload");

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

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

Fiddle

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

为什么jQuery文件上传在首次上传后停止工作？

3 个答案: