web-dev-qa-db-ja.com

dropzone.jsサーバーから取得するときにプログレスバーを抑制します

Dropzone.jsを使用して、以前にサーバーにアップロードされた画像を取得するなど、問題なく動作させることができました。

私が抱えている唯一の問題は、ページの更新時にサーバーからこれらのファイルを取得すると（つまり、このページの現在の使用中にアップロードされなかった場合）、アップロードの進行状況バーが永続的に表示されることです。以前にアップロードした画像のプログレスバーを抑制する方法はありますか？アップロード時にプログレスバーを引き続き使用したいのですが、テンプレートからcssを削除したくありません。

この場合に役立つわけではありませんが、ファイルを取得してリモートプレビューdivに表示するために使用しているコードを次に示します。

Dropzone.options.myDropzone = {
    previewsContainer: document.getElementById("previews"),
    init: function() 
    {
    thisDropzone = this;

    $.get('../cgi/fileUpload.php', function(data) 
    {
        $.each(data, function(key,value)
        {
            var mockFile = { name: value.name, size: value.size};
            thisDropzone.options.addedfile.call(thisDropzone, mockFile);
            thisDropzone.options.thumbnail.call(thisDropzone, mockFile, value.uploaddir+value.name);

            var strippedName = (value.name).slice(11);
            fileList[i] = {"serverFileName" : value.name, "fileName" : value.name, "fileSize" : value.size, "fileId" : i };
            i++;


            var removeButton = Dropzone.createElement("<button class=\"btn btnremove\" style=\"width: 100%;\">Remove file</button>");

            var _this = this;

            removeButton.addEventListener("click", function(e) 
            {

                e.preventDefault();
                e.stopPropagation();

                thisDropzone.removeFile(mockFile);

            });

            mockFile.previewElement.appendChild(removeButton);

        });
    });
},
url: "../cgi/fileUpload.php"
};
javascriptjquerycssdropzone.js
10
tllewellyn

答えた！配信後にjqueryを使用してdivを削除することを選択しました。

$(".dz-progress").remove();

あまりエレガントではありませんが、機能します。

3
tllewellyn

プログレスバーなどがないことを確認してください...

thisDropzone.emit("complete", mockFile);

[〜＃〜] FAQ [〜＃〜] Dropzone.JS

16
eclaude

これは古い質問ですが、同じ問題がありました。私の解決策は、.cssファイルを編集することでした。

.dz-progress {
  /* progress bar covers file name */
  display: none !important;
}
6
Stephen Bade

私も同じ問題を抱えていました。

$（ '。dz-progress'）。hide（）;

.remove（）メソッドの代わりに.hide（）を使用すると便利です。 .remove（）はそのdivパーマネントを削除するためです。

6
Girish Rathod

これが私のために働いてみてください$（ "。spinner"）。hide（）;

0
Suneth Senanayake

あなたはこれを試して働くことができます

init: function() {
            this.on("maxfilesexceeded", function(file) {
                this.removeAllFiles();
                this.addFile(file);
            });
            this.on("addedfile", function(file) {
                console.log("Added file.");
                $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
                console.log(this);
                console.log(file);
            });
            var mockFile = { name: "myimage.jpg", size: 1235, type: "image/jpeg", serverId: 151987, accepted: true }; // use actual id server uses to identify the file (e.g. DB unique identifier)
            this.emit("addedfile", mockFile);
            this.options.thumbnail.call(this, mockFile, 'https://lh3.googleusercontent.com/40gtienq1vthvuWpzCErQJqucB6oxANPHawkEiF6BEJH0Q7mJwHuOyUeRwMBIGb8vO8=s128');
            this.emit("success", mockFile);
            this.emit("complete", mockFile);
            this.files.Push(mockFile);
            $(this.previewsContainer).closest('.crm-upload-wrap').find('.badge').html(this.files.length);
            
            
            $(this.previewsContainer).find('.dz-progress').hide(); //<-- okkk
},
0
Vuong Passion