使用dropzone.js成功上传文件后,清除文件上载表单不起作用

时间:2018-01-27 10:40:09

标签: javascript image-uploading dropzone.js dropzone

我的目标是将一堆图片上传到服务器,然后在上传过程成功完成后清除表单。但是successmultiple事件根本不会发生。

我尝试以三种不同的方式通过在代码中的不同位置调用removeAllFiles()来实现这一点:init的内部和外部以及作为单独的事件。 但没有成功。

完整代码段

<form ref='uploadForm'
   id='uploadForm'
   action='/file-upload'
   method='post'
   class="dropzone"
   encType="multipart/form-data" name="sampleFile">
</form>

<script>
   document.addEventListener("DOMContentLoaded", function () {

      Dropzone.options.uploadForm = {
         autoProcessQueue: false,
         addRemoveLinks: true,
         acceptedFiles: 'image/*',
         resizeWidth: 800,
         resizeMimeType: 'image/jpeg',
         maxFiles: 3,

         init: function () {
            var submitButton = document.getElementById('addItem-btn')
                myDropzone = this;

            submitButton.addEventListener("click", function () {
               var item_id = 'i_' + Math.random().toString(36).substr(2, 12);

               getAdditionalItem(undefined, function (result) {
                  if (result === undefined) {
                     console.log("Callback failed...");
                  }
                  else {
                     addNewItem(result[0], result[1], item_id);
                  }
               });

               myDropzone.on('sending', function (file, xhr, uploadForm) {
                  uploadForm.append('user_id', localStorage.getItem("user_id")),
                  uploadForm.append('item_id', item_id)
               });

               myDropzone.processQueue();

               myDropzone.on("successmultiple", function () {
                  alert("Attempt #1: All pics uploaded");
                  myDropzone.removeAllFiles();
               });
            });

            myDropzone.on("successmultiple", function () {
               alert("Attempt #2: All pics uploaded");
               myDropzone.removeAllFiles();
            });
         },

         successmultiple: function () {
            alert("Attempt #3: All pics uploaded");
            myDropzone.removeAllFiles();
         }
      }
   });
</script>

当我执行此代码时,所有图片都会上传,但不会触发警报并且不会清除dropzone表单。

我还尝试将queuecomplete事件与removeAllFiles()一起使用,但也没有结果。

0 个答案:

没有答案