javascript - 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了解更多详情。