Почему загрузка файла jQuery перестает работать после первой загрузки?

Я использую jQuery File Upload plugin . Я скрываю ввод файла и активирую его, нажав отдельную кнопку. (См. эту скрипку.)

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

To 

element.trigger("click");
Обратите внимание, что теперь, когда вы в первый раз нажимаете кнопку, а затем выбираете файл, метод add активируется, и вы получаете предупреждение (как и раньше), но если вы сделаете это снова, метод add никогда не активируется.

В чем причина такой разницы в поведении?

3 4
javascript jquery jquery-file-upload

3 ответа:

Похоже, что область действия element теряется / изменяется после добавления функции. Сброс его, как показано ниже, кажется, работает.

var element = $("#upload");

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

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

Скрипка

5

Это также можно решить, установив replaceFileInput в false, Как указано в документации . Это происходит потому, что плагин воссоздает входной элемент после каждой загрузки, и поэтому события, связанные с исходным входом, будут потеряны.

8

Попробуйте вот это: 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");
      }
   });
3