如何将自定义css类分配给fineploader中的上传按钮

How to assign custom css class to upload button in fineuploader?

本文关键字：fineploader 按钮 分配 自定义 css      更新时间：2023-09-26

我有下面的代码来初始化finuploader。我想把我的自定义类分配给上传按钮。我试过了提到子元素按钮：classes元素下的"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:-

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

问题1:-如果我使用任何预定义的jquery ui类来上传按钮，比如ui按钮，它就不起作用。尽管它可以与任何其他自定义类一起使用。

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

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

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

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

这是目前自定义上传按钮的首选方法，也是最简单的方法。

首先，创建一个空的元素/容器。在您的例子中，看起来您想要使用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 Upload样式和覆盖默认模板的信息。

相关文章：