0

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

阅读以下主题后：如何在fineuploader中将自定义css类分配给上传按钮？

似乎上传按钮尝试更改为普通的 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();
    });
4

1 回答 1

0

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

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

跨浏览器解决方案是首先将您的按钮呈现为 adiv而不是 a button，然后在该元素上实例化 jQuery-UI button()，然后实例化 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")
      });

});
于 2013-10-04T17:20:07.887 回答