Dropzone.js - сообщение об успешном завершении после загрузки

Question

Я использую Dropzone.js для процесса загрузки файлов. Я уже нашел несколько тем здесь, в stackoverflow относительно моей проблемы, но ни одно из этих решений не помогает мне.

В настоящее время пользователь может загружать сразу несколько файлов сразу после загрузки одного файла, существует ссылка «Удалить файл». Это все! Я хочу следующее:

Если пользователь загружает let's say 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> 

ВНИМАНИЕ: Загрузить работает нормально в настоящее время! Все изображения загружаются на мой сервер, и я также написал сценарий, чтобы имя моего файла было сохранено в моей базе данных. Единственное, что мне нужно - это расширить мой скрипт, чтобы получить успешное сообщение, если загрузка была успешной.

Надеюсь, что кто-то может мне помочь!

EDIT: Вот мой текущий код. Загрузка по-прежнему работает нормально, но сообщение об успехе не загружается после загрузки всех файлов.

<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) { 

      // 
     }); 
    } 
}; 

Эта ссылка может оказаться полезным, а также: 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"); 
     } 

Вы можете передать ссылку, 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 сделаны для нескольких загрузки файлов.