3

我有下面的代码来初始化fineuploader。我想将我的自定义类分配给上传按钮。我尝试在类元素下提及子元素按钮：'my-custom-class'（如下所示），但问题是按钮未显示。我不确定我在这里缺少什么？

$("#my-file-uploader").fineUploader({
request: {
        endpoint: 'my endPoint'
    }
classes: {
   success: 'alert alert-success',
   fail: 'alert alert-error',
   button: 'my-custom-class'
}

});

更新：-

我也试过，但是按钮点击不起作用

$("#my-file-uploader").fineUploader({
request: {
        endpoint: 'my endPoint'
    }
 classes: {
   success: 'alert alert-success',
   fail: 'alert alert-error',
  button: 'my-custom-class''
},
template: '<div class="qq-uploader">' +
 '<div class="my-custom-class'"><div>my upload</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>'

更新 2：-

我尝试了 Ray 在第一个答案中建议的方法 1，它有效。但我在这里看到两个问题：-

问题 1：-如果我使用任何预定义的 jquery ui 类作为上传按钮，如 ui-button ，它不起作用。尽管它适用于任何其他自定义类。

问题 2：- 如果我需要使用多个自定义类作为上传按钮，请说按钮：'my-custom-class1 my-custom-class2'。它可以实现吗？如果是，在这种情况下我将如何初始化fineUploader？

   $("#my-fine-uploader").fineUploader({
    button: $(".my-custom-class1 .my-custom-class2")
});
4

1 回答 1

4

有几种方法可以自定义您的上传按钮（尽管目前首选第一种方法）：

button选项 1：通过选项贡献您自己的上传按钮

这是当前自定义上传按钮的首选和最简单的方法。

首先，创建一个空元素/容器。在您的情况下，您似乎想使用一个 div，只需要一个特定的 CSS 类：

<div class="my-custom-class"><div>Select a file</div></div>

然后，告诉 Fine Uploader 你希望它使用这个容器元素作为你的上传按钮。它将负责嵌入一个不透明<input type="file">元素作为该容器的子元素，并像跟踪默认上传按钮一样跟踪它：

$("#my-fine-uploader").fineUploader({
    button: $(".my-custom-class")
});

您可以在 Fine Uploader 文档站点上阅读有关按钮选项的更多信息。

选项 2：覆盖template选项

这是自定义上传按钮的另一种可能方式，但目前不推荐。目前在 Fine Uploader 中进行模板化有点不方便，但我们打算在功能 #867完成后进行更改。看起来您已经尝试过执行此操作，但没有正确执行。如果你真的想这样做，你可以template像这样调整选项：

$("#my-file-uploader").fineUploader({
    template: '<div class="qq-uploader">' +
              '<div class="qq-upload-drop-area"><span>{dragZoneText}</span></div>' + 
              '<div class="my-custom-class"><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>',    
    classes: {
        button: 'my-custom-class'
    }
});

您可以在 Fine Uploader 文档站点上阅读有关设置 Fine Uploader 样式和覆盖默认模板的更多信息。

于 2013-08-24T22:29:37.007 回答