Из-за стиля кнопки загрузки список файлов не отображается?

Я определил параметры шаблона и шаблона файла для объекта FineUploaderS3.

Мне удалось изменить внешний вид элемента qq-upload-button, изменив div на кнопку и установив его как кнопку после создания загрузчика.

    template: '<div class="qq-uploader">' +
    '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
    '<button class="qq-upload-button"><div>{uploadButtonText}</div></button>' +
    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
    '<ul class="qq-upload-list"></ul>' +
    '</div>',

    ...

    $('.qq-upload-button').button();

Хотя кнопка меняется и работает при нажатии на нее для добавления файлов, файлы не отображаются в списке, очевидно, что он сломан.

Как правильно заставить кнопку «Загрузить» использовать текущую кнопку стиля jQueryUI?

Обновление 1

После прочтения следующего потока: Как назначить пользовательский класс CSS для кнопки загрузки в Fineuploader?

Казалось, что кнопку загрузки будет очень проблематично попытаться превратить в обычную кнопку jQueryUI.

Поэтому я решил проблему, изменив кнопку загрузки на «display: none;», создал свою собственную общую кнопку jQueryUI, при нажатии на мою кнопку отправил щелчок на скрытую кнопку.

Решение:

    <button id="addFiles">Add Files</button>

    ...

    template: '<div class="qq-uploader">' +
    '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' +
    '<div class="qq-upload-button" style="display:none;"><div>{uploadButtonText}</div></div>' +
    '<span class="qq-drop-processing"><span>{dropProcessingText}</span><span class="qq-drop-processing-spinner"></span></span>' +
    '<ul class="qq-upload-list"></ul>' +
    '</div>',

    ...            

    $('#addFiles').click(function() {
    $(".qq-uploader input").click();
    });

fine-uploader
person sthede    schedule 04.10.2013    source источник
comment
Вы должны опубликовать свое решение в качестве ответа, чтобы другие могли получить пользу.   -  person Mark Feltner    schedule 04.10.2013
comment
Ваш подход не будет работать в IE9 и более ранних версиях из-за ограничений безопасности, установленных в этих браузерах. Вскоре мы рассмотрим проблему с кнопками пользовательского интерфейса jQuery...   -  person Ray Nicholus    schedule 04.10.2013

Ответы (1)


arrow_upward
0
arrow_downward

Ваше решение не будет работать в IE9 и более ранних версиях, поскольку программный щелчок по элементу ввода не разрешен в этих браузерах.

Использование элемента button в качестве кнопки загрузки не будет работать в IE9 и более ранних версиях, поскольку эти браузеры перехватывают события изменения элементов button до того, как Fine Uploader сможет это сделать. Кроме того, конструктор кнопки jQuery-UI должен добавить некоторую логику, которая также перехватывает события, потому что мне нужно было создать ее экземпляр до Fine Uploader. Возможно, связано с более ранним вопросом о кнопке Bootstrap.

Кросс-браузерное решение будет состоять в том, чтобы сначала отобразить вашу кнопку как div вместо button, затем создать экземпляр button() jQuery-UI для этого элемента, а затем создать экземпляр Fine Uploader с параметром button, установленным в качестве этого элемента. Кроме того, с предложенными мной изменениями вы можете отказаться от опции template. Fine Uploader имеет некоторую логику в шаблоне по умолчанию, который добавляет или удаляет свой собственный элемент кнопки в зависимости от наличия опции button.

  <h3>Fine Uploader</h3>
  <div id="addFiles"">Add Files</div>
  <div id="jquery-wrapped-fine-uploader"></div>

$(document).ready(function() {

    // Construct jQuery-UI button
    $("#addFiles").button();

    // Instantiate Fine Uploader
    $('#jquery-wrapped-fine-uploader').fineUploaderS3({
        button: $("#addFiles")
      });

});
person Mark Feltner    schedule 04.10.2013
comment
Спасибо за работу по обработке IE9. Хотя я понимаю, что проект FineUploader может захотеть продолжить поддержку IE9, действительно ли он нужен? Я только что проверил w3schools.com/browsers/browsers_explorer.asp, они показывают IE9 и ниже , в общей сложности около 6%. 6%, безусловно, число, которое кто-то может не захотеть проглотить, но если учитывать 6% браузеров, это причиняет много боли каждому своему. - person sthede; 05.10.2013
comment
IE9 ближе к 10%, а IE8 почти 25%. Fine Uploader по-прежнему поддерживает IE7, и даже в ближайшем будущем мы не планируем отказываться от поддержки этой версии. На IE9 и более ранние версии приходится большой объем веб-трафика, поэтому было бы неразумно отказываться от поддержки этих браузеров. - person Ray Nicholus; 05.10.2013
comment
Каков график, когда система шаблонов в Fine Uploader будет переработана? - person sthede; 07.10.2013
comment
Это продолжается сейчас. Фактически, в ветке разработки эта функция завершена. План состоит в том, чтобы выпустить это как часть 4.0 вместе с генерацией эскизов. Вероятно, осталось еще около 2 недель работы до выпуска 4.0. Я настоятельно рекомендую ознакомиться с ним и прокомментировать связанный случай (#867). до выпуска 4.0, если у вас есть какие-либо предложения. - person Ray Nicholus; 07.10.2013