Dropzone.js

Question

我正在使用 Dropzone.js 进行文件上传过程。我已经在 Whosebug 上找到了一些关于我的问题的主题，但是 none 这些解决方案对我有帮助。

现在用户可以一次上传多个文件，只要上传一个文件，就有一个link叫做"Remove File"。就这样！我想要的是以下内容：

如果用户上传了比方说 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

我是这样做的，结合了 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 2

这有帮助吗？

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

             //
        });
    }
};

这个 link 也可能有帮助：https://github.com/enyo/dropzone/issues/244

Answer 3

试试这个，写下你的成功代码，

 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");
        }

您可以参考link, http://www.dropzonejs.com/#event-success了解更多详情。

Answer 4

我遇到了和你类似的问题，所以这是我的代码，希望它能帮到你

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");
            });
        }
    };

sendingmultiple,completemultiple 和 successmultiple 是为多文件上传制作的。

Dropzone.js - 上传成功消息

Dropzone.js - Success message after Upload

javascript

php

jquery

file-upload