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