代码之家 › 专栏 › 技术社区 › emilly

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

fine-uploader javascript

emilly · 技术社区 · 11 年前

我有下面的代码来初始化微调上传器。我想把我的自定义类分配给上传按钮。我试过了提到子元素按钮: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 回复 | 直到 11 年前

Ray Nicholus 11 年前

有几种方法可以自定义上传按钮(尽管目前首选第一种方法):

选项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")
});

你可以阅读更多关于 button option on the Fine Uploader documentation site .

选项2:覆盖 `template` 选项

这是自定义上传按钮的另一种可能方式,但目前不推荐使用。Fine Uploader中的模板目前有点不方便,但我们打算更改一次 feature #867 已完成。看起来您已经尝试过执行此操作,但没有正确执行。如果你 真正地 无论如何,如果想这样做,您可以调整 样板 这样的选项:

$("#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'
    }
});

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

选项1:通过 button 选项

选项2:覆盖 template 选项

选项1:通过 `button` 选项

选项2:覆盖 `template` 选项