2016-07-27 27 views
1

magentoでdropzone.jsを使用してファイルをアップロードしています。プログレスバーは正常に機能していますが、進捗率も表示したいと考えています。以下の関数は、スパンにスタイルを追加しています。dropzone.jsでアップロードの進捗率を表示するには

uploadprogress: function(a, b) { 
       var c, d, e, f, g; 
       if (a.previewElement) { 
        for (f = a.previewElement.querySelectorAll("[data-dz-uploadprogress]"), g = [], d = 0, e = f.length; e > d; d++) c = f[d], g.push("PROGRESS" === c.nodeName ? c.value = b : c.style.width = "" + b + "%"); 
        return g 
       } 
      }, 

これは、次のhtmlにstyle = "width:xx%"を追加したものです。

私はまた、上記のコードをテキストとしてspanに返す%resultを表示したいので、ユーザーは数字も見ることができます。

答えて

2

あなたはこのような例のためのあなたのプログレスバーでのスパンを持っていると仮定すると:

<div class="progress"> 
    <div class="progress-bar progress-bar-primary" role="progressbar" data-dz-uploadprogress> 
     <span class="progress-text"></span> 
    </div> 
</div> 

次のようにあなたのuplaodprogressfunctionを定義する必要があります。

uploadprogress: function(file, progress, bytesSent) { 
    if (a.previewElement) { 
     var progressElement = file.previewElement.querySelector("[data-dz-uploadprogress]"); 
     progressElement.style.width = progress + "%"; 
     progressElement.querySelector(".progress-text").textContent = progress + "%"; 
    } 
} 
+0

をこれがうまく動作します。私はこのソリューションのソリューションに追加したいので、これを読んでいる人はオプションに入っていることを知りたいかもしれません。オプションに追加するには、次のようにします: 'Dropzone.options.dropzoneIDHere = { uploadprogress:function(file、progress、bytesSent ){ } }; ' – fungusanthrax

関連する問題