0

这是一段代码到 a 中:

<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 开发人员复制了这个示例。我将第二个 div 更改为class="button"(我在应用程序中随处使用的 CSS 样式)。但是,没有样式发生。另外,我会在哪里引用我的一种样式到uploadButtonjavascript 中的自定义样式?

谢谢。

4

1 回答 1

0

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

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

关于“选择文件”按钮,您有三个选项:

  1. 创建您自己的 div/anchor/etc 元素,并通过button选项将其传递给 Fine Uploader 。Fine Uploader 将添加一个不透明的文件输入元素作为此按钮元素的子元素。使用 CSS 为您的元素设置您喜欢的样式。

  2. 创建您自己的 CSS(文件),以 Fine Uploader 的 UI 模块创建的默认按钮为目标。有很多方法可以确保您的 CSS 属性“获胜”,但这严格来说是一个 CSS 问题,并且超出了这里的范围。

  3. 覆盖该template选项。我建议不要走这条路。Fine Uploader 的模板选项比较脆弱,需要在以后的版本中改进。您可以在样式自述文件的前半部分阅读更多关于覆盖模板的信息,但我再次建议您不要这样做。

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

听起来您只是没有正确导入 Fine Uploader 附带的 CSS 文件。这在演示页面/网站上的第一个示例“设置”中进行了介绍。

于 2013-05-15T19:39:48.777 回答