Question

我遵循了DropzoneJS文档中的用法示例以及stackoverflow中的一些用法示例。但是，我仍然无法使其正常工作。这是我的Dropzone代码。

   <p class="h6 my-0 mb-10">PEMERIKSAAN</p>
     <form action="{{url('radiologi/upload/gambar')}}" class="dropzone" id="my-dropzone" method="POST">
       <input type="hidden" name="saltPict" value="{{$key}}">
       <input type="hidden" name="target" value="{{$transaksi->slug}}">
         {{csrf_field()}}
     </form>

在这里，我添加的javascript代码可以捕获无法正常工作的事件。

    <script type="text/javascript">
    Dropzone.autoDiscover = false;
    Dropzone.options.myDropzone = {
        init: function() {
            this.on("complete", function (file) {
                if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                    $("#submit-all").removeAttr("disabled");
                }
            });
            this.on("processing", function (file) {
                console.log("check");
                $("#submit-all").attr("disabled", "disabled");
            });
        }
    };
    // $("#my-dropzone").dropzone();
    Dropzone.options.myDropzone.init();
</script>

我尝试将javascript代码放置在文档就绪功能内或不放置在文档就绪功能内。尽管如此，它还是行不通的。唯一的错误输出是这个

我唯一的目的是在DropzoneJS完成上传所有文件后捕获该事件。

Answer 1

您不应该自己打myDropzone.init，dropzone会帮您做到这一点。

Answer 2

Dropzone在处理文件时触发事件，您可以通过在实例上调用.on(eventName, callbackFunction)来轻松注册这些文件。

由于只能在Dropzone实例上侦听事件，因此设置事件侦听器的最佳位置是init函数：

// The recommended way from within the init configuration:
Dropzone.options.myAwesomeDropzone = {
init: function() {
this.on("addedfile", function(file) { alert("Added file."); });
     }
   };

Answer 3

哇，就像魔术一样。我只是尝试另一个来自Dropzone文档的示例。令人惊讶的是，代码更简单。

Dropzone.autoDiscover = false;
    $(function() {
        // Now that the DOM is fully loaded, create the dropzone, and setup the
        // event listeners
        var myDropzone = new Dropzone("#my-dropzone");
        myDropzone.on("complete", function(file) {
            console.log("halo");
            /* Maybe display some more file information on your page */
        });
    })

并且不要将其放在$（document）.ready函数上，因此将在附加Dropzone本身之前调用它。感谢任何尝试帮助我的人。

DropzoneJS事件监听器将不会加载

3 个答案: