上传按钮样式导致文件列表不显示？

Question

我已经为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();

虽然按钮发生了变化，并且在单击添加文件时可以正常工作，但文件没有显示在列表中，这显然是损坏的。

让Upload按钮使用当前jQueryUI风格按钮的正确方法是什么？

更新 1

阅读以下帖子后：How to assign custom css class to upload button in fineuploader?

看起来上传按钮尝试更改为普通的jQueryUI按钮会很有问题。

所以我通过将上传按钮更改为“显示：无”解决了这个问题，创建了我自己的通用 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();
    });

Answer 1

您的解决方案不适用于 IE9 和更早版本，因为在这些浏览器中不允许以编程方式单击输入元素。

使用 button 元素作为上传按钮在 IE9 及更低版本上不起作用，因为这些浏览器会在 Fine Uploader 能够之前拦截 button 元素上的更改事件。此外，jQuery-UI 按钮构造函数也必须添加一些拦截事件的逻辑，因为我需要在 before Fine Uploader 之前实例化它。可能与earlier question regarding Bootstrap's button 相关。

跨浏览器解决方案是首先将您的按钮呈现为 div 而不是 button，然后在该元素上实例化 jQuery-UI 的 button()，然后使用 @987654329 实例化 Fine Uploader 的实例@ 选项设置为该元素。此外，通过我提出的更改，您可以取消 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")
      });

});