如何在fineuploader中将自定义css类分配给上载按钮? [英] How to assign custom css class to upload button in fineuploader?

问题描述

我有以下代码来初始化fineuploader.我想分配我的自定义课程以上传按钮.我试过了 在子元素下提到子元素按钮:"my-custom-class"(如下所示)，但问题是按钮未显示. 我不确定我在这里想念什么?

I have below code to initialize the fineuploader. i want to assign my custom class to upload button. I tried mentioning subelement button: 'my-custom-class' under classes element(as shown below) but issue is button is not displayed. i am not sure what i am missing here?

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

});

更新:-

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

I also tried but then button click does not work

$("#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，它起作用了.但我在这里看到两个问题:-

I tried approach 1 as suggested by Ray in first answer it works. But i see two issues here:-

问题1:-，如果我对ui-button之类的上传按钮使用任何预定义的jQuery ui类，则它不起作用.尽管它可与任何其他自定义类一起使用.

Issue 1:- if i use any predefined jquery ui class for upload button like ui-button , it does not work.Though it works with any other custom class.

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

Issue 2:- If i need to use use multiple custom class for upload button, say button: 'my-custom-class1 my-custom-class2'. Is it achievable? If yes how will i initialize the fineUploader in that case?

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

推荐答案

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

There are a couple ways to customize your upload button (though the first approach is currently preferred):

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

This is currently the preferred, and easiest way to customize the upload button.

首先，创建一个空的元素/容器.在您的情况下，您似乎要使用div，仅使用特定的CSS类:

First, create an empty element/container. In your case, it looks like you want to use a div, just with a specific CSS class:

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

然后，告诉Fine Uploader您希望它使用此容器元素作为您的上传按钮.它将负责将不透明的<input type="file">元素作为此容器的子元素嵌入，并像默认的上载按钮一样对其进行跟踪:

Then, tell Fine Uploader that you want it to use this container element as your upload button. It will take care of embedding an opaque <input type="file"> element as a child of this container, and will track it as it would the default upload button:

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

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

You can read more about the button option on the Fine Uploader documentation site.

这是自定义上传按钮的另一种可能方式，但目前不建议这样做.目前在Fine Uploader中进行模板操作有点不方便，但我们打算将其更改为功能#867 完成.看来您已经尝试执行此操作，但未正确执行它.如果您真的想以这种方式做到这一点，则可以像这样调整template选项:

This is another possible way to customize the upload button, but it is not currently recommended. Templating in Fine Uploader is a bit inconvenient currently, but we intend to change that once feature #867 is completed. It looks like you already attempted to do this, but did not execute it correctly. If you really want to do it this way anyway, you can adjust the template option like so:

$("#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文档站点上覆盖默认模板的更多信息.

这篇关于如何在fineuploader中将自定义css类分配给上载按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！