Вызов Valums Ajax Uploader из другого элемента DOM

Question

У меня проблема с загрузкой Ajax-файла valums.

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

Мой DOM состоит из входного файла и контейнера для создания экземпляров кнопок загрузки файлов.

Я хочу иметь возможность запускать плагины загрузчика файлов при нажатии на вход: file [name = "upload-file"].

...
<div id="upload-accepted">
  <fieldset>
    <label for="upload-file">Select a file:</label>
    <input type="file" name="upload-file" id="upload-file"/>
    <noscript>
      <p>Please enable JavaScript to use file uploader.</p>
    </noscript>
  </fieldset>
  <div id="upload-container">
  </div>
</div>
...
<script type="text/javascript">
  $(function() {
      var uploader = new qq.FileUploader({
      action: '/file-upload',
      element: document.getElementById('upload-container'),
      onSubmit: function(id, filename){...},
      onComplete: function(id, fileName, responseJSON){...}
    });
  });
</script>

Я попытался добавить следующее в скрипт, но он не работает

$("#upload-file").live('change', function(event) {
  event.preventDefault();
  $('.qq-upload-button').trigger('click');
  return false;
});

Есть какие-нибудь подсказки?

Заранее спасибо!

Answer 1

Вы должны вызвать это:

$('input[name="file"]').trigger('click');

У меня работает!

Answer 2

При настройке FileUploader вы указываете элемент option, обычно что-то вроде этого:

new qq.FileUploader({
   element: document.getElementById('uploadImage'),
...

Если вы проверите, DOM-скрипт вставляет вход загрузки внутри div с этим идентификатором. Таким образом, вы должны иметь возможность доступа к вводу и связать действие клика с ним.

Если вы используете jQuery, он должен работать примерно так:

$('#uploadImage input').trigger('click');

или просто

$('#uploadImage input').click();