Dropzone-是否可以移動上傳進度條？

我在我的應用程式中Dropzone使用jQuery和。ThymeleafSpring MVC

只需最少的配置，就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%？非常感謝。

編輯：

我只是想在下面包含一個在已接受答案中實施 Vince 的出色建議的 Dropzone 的螢屏截圖。就我而言，僅 CSS 更改就解決了問題。將此與我原始帖子的螢屏截圖進行比較。進度條現在出現在“洗掉檔案”鏈接下，并且不會掩蓋檔案名——正是我想要的。再次感謝@Vince Polston - 干得好！

uj5u.com熱心網友回復：

據我所知，移動 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;
}

JS

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>

我認為這會讓你到達你想去的地方？如果是這樣，請標記答案.. 回答！如果您還有其他問題，我很樂意盡早嘗試解決。

謝謝，副總裁

標籤：javascripthtmljQuery弹簧MVCdropzone.js

上一篇：在thymeleaf中通過視圖名稱更改進行布局時，我可以在springboot中輕松保留內容協商嗎？

下一篇：cv2中的可變fps（每秒幀數）