Question

以下是一段代码：

<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="button" style="margin-top: 10px;">Save</div>

<script type="text/javascript" src="~/js/fineuploader/fineuploader-3.5.0.js"></script>
<script type="text/javascript">
   $(document).ready(function () {
      var manualuploader = new qq.FineUploader({
         element: $('#manual-fine-uploader')[0],
         request: {
            endpoint: 'server/handleUploads'
         },
         autoUpload: false,
         text: {
            uploadButton: 'Select Files'
         }
      });

      $('#triggerUpload').click(function () {
         manualuploader.uploadStoredFiles();
      });
   });
</script>

作为背景，我使用的是FineUploader的V3.5.0，我使用的是独立的依赖免费版本。我真的只是为FineUploader dev复制了this示例。我改变了第二个div来说class="button"（我在我的应用程序中使用的CSS样式）。但是，不会出现样式。我还会在哪里将我的一个样式的引用添加到javascript中的自定义样式uploadButton？

感谢。

Answer 1

正如您在评论中提到的，您想要设置“保存”按钮（您已创建）和“选择文件”按钮（Fine Uploader创建）的样式。

就“保存”按钮而言，这与Fine Uploader完全无关。您已创建此按钮，但它不是Fine Uploader的一部分。您可以通过CSS为它设置样式。

关于“选择文件”按钮，您有三个选项：

创建您自己的div / anchor / etc元素，并通过button option将其传递给Fine Uploader。 Fine Uploader将添加一个不透明的文件输入元素作为此按钮元素的子元素。无论你喜欢使用CSS，都要设置元素的样式。
创建您自己的CSS（文件），定位由Fine Uploader的UI模块创建的默认按钮。有很多方法可以确保您的CSS属性“获胜”，但这严格来说是一个CSS问题，而且实际上超出了范围。
覆盖template选项。我建议不要走这条路。 Fine Uploader的模板选项很脆弱，需要在以后的版本中进行改进。您可以阅读有关覆盖first half of the styling readme中模板的更多信息，但同样，我建议您不要这样做。

在上面三个选项中，第一个选项是最简单的，也是我个人推荐的选项。

听起来你根本就没有正确导入Fine Uploader附带的CSS文件。这在demo page/website的第一个示例“设置”中有所介绍。

FineUploader div不会显示类

1 个答案: