Dropzone.js-上傳后成功消息

Question

我在文件上傳過程中使用了Dropzone.js。 我已經在stackoverflow上找到了一些有關我的問題的主題，但是這些解決方案都沒有幫助我。

現在，用戶可以在一次上傳一個文件時立即一次上傳多個文件，這里有一個名為“刪除文件”的鏈接。 就這樣！ 我想要的是以下內容：

如果用戶上傳了4張圖片，那么在上傳所有圖片之后，應該會顯示一條成功消息。 現在，用戶不知道這些文件是否已100％上傳。 我不擅長jQuery / Ajax，所以我真的不知道我的代碼應該是什么樣。 如果有人可以告訴我我的代碼應是什么樣的，那么它會起作用，那就太好了。

這是我的表格：

    print "<div class='col-sm-12'><br /><br />";
    print "<form method='post' action='index.php' id='dropzone' class='form-horizontal dropzone'>";
    print "<input type='hidden' name='func' value='supportticket'>";
    print "<input type='hidden' name='id' value='".$id."'>";
    print "<input type='hidden' name='sid' value='".$sid."'>";
    print "<input type='hidden' name='attach_images' value='".$attach_images."'>";
    print "<div class='form-group'>";
    print "<div class='col-sm-8'>";
    print "<div class='fallback'>";
    print "<input name='file' type='file' multiple='' />";
    print "</div>";
    print "</div>";
    print "</div>";
    print "</form>";
    print "</div>";

這是我的腳本：

    <script type="text/javascript">
        jQuery(function($){

        try {
          Dropzone.autoDiscover = false;
          var myDropzone = new Dropzone("#dropzone" , {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2.0, // MB

            addRemoveLinks : true,
            dictDefaultMessage :
            '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
            <span class="smaller-80 grey">(or click)</span> <br /> \
            <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
            dictResponseError: 'Error while uploading file!',

            //change the previewTemplate to use Bootstrap progress bars
            previewTemplate: "<div class=\"col-sm-4\"><div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress><br /></div></div>\n</div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div></div>"
          });



           $(document).one('ajaxloadstart.page', function(e) {
                try {
                    myDropzone.destroy();
                } catch(e) {}
           });

        } catch(e) {
          alert('Dropzone.js does not support older browsers!');
        }

        });
    </script>

注意：目前上傳工作正常！ 所有圖像都上傳到我的服務器，並且我還編寫了一個腳本，以便將文件名保存在數據庫中。 我唯一需要做的就是擴展腳本，以便在上傳成功后獲得成功消息。

希望有人可以幫助我！

編輯：這是我當前的代碼。 上載仍然可以正常工作，但是在上載所有文件后沒有成功消息。

    <script type="text/javascript">
        jQuery(function($){

        try {
          Dropzone.autoDiscover = false;
          var errors = false;
          var myDropzone = new Dropzone("#dropzone" , {
            paramName: "file", // The name that will be used to transfer the file
            maxFilesize: 2.0, // MB

            error: function(file, errorMessage) {
            errors = true;
            },
            queuecomplete: function() {
            if(errors) alert("There were errors!");
            else alert("We're done!");
            },

            addRemoveLinks : true,
            dictDefaultMessage :
            '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> Drop files</span> to upload \
            <span class="smaller-80 grey">(or click)</span> <br /> \
            <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>',
            dictResponseError: 'Error while uploading file!',

            //change the previewTemplate to use Bootstrap progress bars
            previewTemplate: "<div class=\"col-sm-4\"><div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress><br /></div></div>\n</div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n<span data-dz-suc>successfull</span></div></div>"
          });

           $(document).one('ajaxloadstart.page', function(e) {
                try {
                    myDropzone.destroy();
                } catch(e) {}
           });


        } catch(e) {
          alert('Dropzone.js does not support older browsers!');
        }

        });
    </script>

謝謝克里斯

Answer 1

試試看，如下編寫您的成功代碼，

 success:function(file, response)
        {
            // Do what you want to do with your response
            // This return statement is necessary to remove progress bar after uploading.
            return file.previewElement.classList.add("dz-success");
        }

您可以參考鏈接http://www.dropzonejs.com/#event-success以獲得更多詳細信息。

Answer 2

這是我的方法，結合了error處理程序和queuecomplete ：

var errors = false;

var myDropzone = new Dropzone("#dropzone" , {
    ...

    error: function(file, errorMessage) {
        errors = true;
    },
    queuecomplete: function() {
        if(errors) alert("There were errors!");
        else alert("We're done!");
    }

Answer 3

我遇到了與您類似的問題，所以這是我的代碼，希望它可以為您

Dropzone.options.UploadForm = {
        method: "post",
        uploadMultiple: true,
        acceptedFiles: ".csv",
        autoProcessQueue: false,
        init: function () {
            myDropzone = this;
            var submitButton = document.querySelector("#submit-all");
            var removeButton = document.querySelector("#remove-all");

            submitButton.addEventListener("click", function () {
                myDropzone.processQueue(); // Tell Dropzone to process all queued files.
            });
            removeButton.addEventListener("click", function () {
                myDropzone.removeAllFiles();
                submitButton.removeAttribute("disabled");
            });
            this.on("addedfile", function (file) {
            });
            this.on("sendingmultiple", function (file) {
                // And disable the start button
                submitButton.setAttribute("disabled", "disabled");
            });
            this.on("completemultiple", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    submitButton.removeAttribute("disabled");
                }
            });
            this.on("successmultiple", function (file, response) {
                console.log(response);
                $(response).each(function (index, element) {
                    if (element.status) {
                        $("body").prepend('<div class="alert alert-success alert-dismissable">' +
                            '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
                            '<strong>Success! </strong> ' + element.fileName + ' was uploaded successfully</div>');
                    }
                    else {
                        $("body").prepend('<div class="alert alert-danger alert-dismissable">' +
                            '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
                            '<strong>Error!</strong> ' + element.message + '</div >');
                    }
                });
                submitButton.removeAttribute("disabled");
            });
            this.on("error", function (file, errorMessage) {
                $("body").prepend('<div class="alert alert-danger alert-dismissable">' +
                    '<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>' +
                    '<strong>Error!</strong> ' + errorMessage + '</div >');
                submitButton.removeAttribute("disabled");
            });
        }
    };

sendmultiple，completemultiple和successmultiple用於上傳多個文件。

Answer 4

這有幫助嗎？

Dropzone.options.myDropzone = {
  init: function() {
        this.on("success", function(file, responseText) {

             //
        });
    }
};

該鏈接也可能會有所幫助： https : //github.com/enyo/dropzone/issues/244