Dropzone.js - sadece tam yüklemenin ilerlemesini göster

Question

Dosyalarım sunucuma yüklemek için dropzone.js kullanıyorum.

<div id="full_site"> 
    <form id="uploadFile" method="post" name="uploadFile" action="upload.php" 
      class="dropzone needsclick dz-clickable full-height"> 
     <span id="tmp-path"></span> 
     <div class="dz-message"><b></b></div> 
    </form> 
</body> 


<script> 
    $(document).ready(function() { 
     Dropzone.autoDiscover = false; 

     Dropzone.options.uploadFile = { 
      init: function() { 
       this.on("success", function (file, responseText) { 
        file.previewTemplate.appendChild(document.createTextNode(responseText)); 
       }); 

       this.on("sending", function (file) { 
        $("#tmp-path").html('<input type="hidden" name="path" value="' + file.fullPath + '" />') 
       }); 
      } 
     }; 

     var myDropzone = new Dropzone("#uploadFile", { 
      url: "upload.php" 
     }); 
    }); 
</script> 

Ne bir daha göstermiştir herhangi bir yükleme önizleme vardır ki, ben ulaşmak için deneyin, böylece artık her dosya için hiçbir önizleme, ancak bir ilerleme çubuğu vardır, bu gösteri var: Dosya benziyor işte böyle Tam yüklemenin genel süreci (belki yalnızca bir tane varsa, ancak her bir öğeyi göstermediğinde bir hata gösterilsin). Bunu başarabileceğim bir yol var mı?

numaralı telefonu düzenle: İsteğe bağlı bir nokta, bu ilerleme çubuğunu bir önyükleme modelinde göstermek olabilir, bu nedenle bir şey yüklediğinizde sitede hiçbir şey değişmez.

Answer 1

Bunun için birkaç bölüm var. Öncelikle, kuyruğa alınmış veya yüklenmekte olan öğeler için herhangi bir önizleme şablonundan kaçınmak istersiniz. Ben dropzone nesnenin çeşit gerektiğini düşünüyorum, bu nedenle temelde bunun içinde hiçbir şey bir div için dropzone başlatma previewTemplate seçeneği ayarlayarak bunu yapabilirsiniz:

var myDropzone = new Dropzone("#uploadFile", { 
    url: "upload.php", 
    previewTemplate: "<div></div>" 
}); 

diğer kısmı ilerleme çubuğu bulunur.

myDropzone.on("totaluploadprogress", function(progress) { 
    // Update progress bar with the value in the variable "progress", which 
    // is the % total upload progress from 0 to 100 
}); 

Umarım bu: Bunu gerçekleştirmek için, ilerleme çubuğunda ilerleme güncellemek için dropzone gelen totaluploadprogress olayını kullanmak,

myDropzone.on("addedfile", function (file) { 
    // Build progress bar here 
}); 

Sonra ilerleme çubuğu oluşturmak için addedfile için bir olay dinleyicisi ekleyebilirsiniz doğru yöne işaret ediyor. Elbette, toplam ilerleme çubuğunu, vb. Gizlemek için olduğu gibi başka bir temizleme ihtiyacı olacaktır.