Dropzone - 是否可以移动上传进度条？答案

【问题标题】：Dropzone - is it possible to move the upload progress bar?Dropzone - 是否可以移动上传进度条？
【发布时间】：2022-09-27 21:35:06
【问题描述】：

我在我的Spring MVC 应用程序中使用Dropzone 和jQuery 和Thymeleaf。

通过最少的配置，Dropzone 工作出色，只有一个小问题。我将autoProcessQueue 设置为false，以便在单击提交按钮之前不会处理队列。这意味着进度条（在单击提交按钮之前显示为 0 进度）会遮盖预览中的文件名。这可以在附图中看到。这三个文件名在进度条后面几乎可见，但它们非常暗淡。

我的 Dropzone 配置粘贴在下面：-

Dropzone.options.frmTarget = {
        autoProcessQueue: false,
        paramName: \'file\',
        clickable: true,
        maxFilesize: 20,
        uploadMultiple: false,
        parallelUploads: 10,
        maxFiles: 20,
        addRemoveLinks: true,
        acceptedFiles: \'.png,.jpg,.pdf,.doc,.docx,.xls, .xlsx,.xml,.bmp,.msg,.txt\',
        dictDefaultMessage: \'Drag files or click here to select\',
        init: function () {
            var myDropzone = this;
            myDropzone.removeAllFiles();

            myDropzone.on(\"complete\", function(file) {
              myDropzone.removeFile(file);
            });

            myDropzone.on(\"queuecomplete\", function (file) {
              $(\"#dropzone-info\").show().delay(3500).fadeOut();
            });

            $(\"#button\").click(function (e) {
                e.preventDefault();
                myDropzone.processQueue();
            });

            $(\"#button1\").click(function (e) {
                e.preventDefault();
                myDropzone.removeAllFiles();
            });
    }
}

这就是 Dropzone 添加到 HTML 页面的方式，它与表单中的其他元素结合使用 Thymeleaf 将模型数据绑定到表单：-

<form id=\"frmTarget\"
      th:object=\"${metadataListWrapper}\"
      class=\"dropzone\"
      th:action=\"@{/content/upload/{app}(app=${metadataListWrapper.applicationName})}\"
      method=\"post\">
    <div th:if=\"${not #lists.isEmpty(metadataListWrapper.metadataDefinitionList)}\"
         th:each=\"metadataHolder, iStat : ${metadataListWrapper.metadataDefinitionList}\">
        <div th:if=\"${metadataHolder.includeInIngestionForm == true}\">
            <input th:field=\"*{metadataDefinitionList[__${iStat.index}__].value}\" type=\"hidden\"/>
            <span th:replace=\"fragments/non-value-hidden-fields :: non-value-hidden-fields\"></span>
        </div>
    </div>
    <input th:field=\"*{applicationName}\" type=\"hidden\"/>
    <input th:field=\"*{applicationDisplayName}\" type=\"hidden\"/>
</form>

我将非常感谢任何解决此问题的建议和想法。例如，是否可以将进度条向下移动，使其显示在文件名下方而不是文件名上方，或者在启动上传之前根本不显示进度条？或者进度条的不透明度可以降低到 50%？非常感谢。

标签： javascript html jquery spring-mvc dropzone.js

【解决方案1】：

据我所知，移动 dropzone 进度条和/或更改不透明度的最简单方法是调整 CSS。

工作密码笔：https://codepen.io/vpolston/pen/JjvMLpr

YouTube 上的演练视频：https://www.youtube.com/watch?v=w3w6PvLRRgY

如果我们接收到.dropzone .dz-preview .dz-progress，我们可以调整进度条本身的属性。对于我的测试，我改变了位置和背景 rgba。

CSS

.dropzone .dz-preview .dz-progress {
  top: 115% !important;
  background: rgba(0,0,255,90%) !important;
}

Dropzone.options.myGreatDropzone = { 
  autoProcessQueue: false,
  paramName: "file", 
  maxFilesize: 2, 
  accept: function(file, done) {
    if (file.name == "justinbieber.jpg") {
      done("Naha, you don't.");
    }
    else { done(); }
  }
};

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.css" integrity="sha512-7uSoC3grlnRktCWoO4LjHMjotq8gf9XDFQerPuaph+cqR7JC9XKGdvN+UwZMC14aAaBDItdRj3DcSDs4kMWUgg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.js" integrity="sha512-9e9rr82F9BPzG81+6UrwWLFj8ZLf59jnuIA/tIf8dEGoQVu7l5qvr02G/BiAabsFOYrIUTMslVN+iDYuszftVQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<form action="/file-upload" class="dropzone" id="my-great-dropzone"></form>

我认为这会让你到达你想去的地方？如果是这样，请标记答案.. 回答！如果您还有其他问题，我很乐意尽早尝试解决。

谢谢，副总裁

【讨论】：