Question

我已经为fineUploaderS3对象定义了template和filetemplate选项。

我已经能够改变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

阅读以下主题后：How to assign custom css class to upload button in 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();
    });

Answer 1

您的解决方案无法在IE9及更早版本上运行，因为在这些浏览器中不允许以编程方式单击输入元素。

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

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

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

1 个答案: