ファイルアップ時のプログレスバーに関して

Question

どうぞよろしくお願いいたします。
ファイルアップ時にプログレスバーにてアップロード状況を表示したいのですが 現状ファイルアップと同時にプログレスバーが表示されるのですが バー表示がいきなり100%になってしまいます。
ねらいは徐々にバー表示が増えていきたいのですが実現できなく困っております。
ファイルのアップロードが終了したら成功の表示はされます。
GoogleChromeで実行してます。下記にコードを載せました
何卒よろしくお願いいたします。

$(function(){
/================================================
ファイルをドロップした時の処理
=================================================/
$('#drag-area').bind('drop', function(e){
// デフォルトの挙動を停止
e.preventDefault();

    // ファイル情報を取得
    var files = e.originalEvent.dataTransfer.files;
 
 // メッセージエリアのメッセージをクリア
    result = $('#result');
    result.html('');
	  // ファイル情報を追加
	  for (var i = 0; i < files.length; i++) {
		  upload(files[i],i);
	  }
   
 
  }).bind('dragenter', function(){
    // デフォルトの挙動を停止
    return false;
  }).bind('dragover', function(){
    // デフォルトの挙動を停止
    return false;
  });

/================================================
アップロード処理
=================================================/
function upload(files, num) {
var f_id = 'filename_'+ num;
var p_id = 'progress_'+ num;
$('#result').append('<div><span id="'+ f_id + '">' + files.name + '</span><progress id="'+ p_id +'" value="0" max="100">0%</progress></div>');

    // データを送信用する
    var fd = new FormData();
    fd.append("files", files);
    // ajaxを使用してアップロード
    $.ajax({
    	 async: true,
        xhr : function() {
            XHR = $.ajaxSettings.xhr();
            
          
            if (XHR.upload) {
                XHR.upload.addEventListener('progress',
                        function(e) {
                	           progre = parseInt(e.loaded / e.total * 10000) / 100;
                            console.log(progre + "%");
                           
                            document.getElementById(p_id).value = progre;
                            document.getElementById(p_id).innerHTML = progre + '%';
                        }, false);
            }
            return XHR;
        },
        url: '/FileUp',
	    type: 'POST',
	    data: fd,
	    processData: false,
	    contentType: false,
        success: function (data) {
            var msg = "成功";
            if(data['FLG'] == false){
                msg = "失敗";
            }
            document.getElementById(f_id).innerHTML = files.name + ":" + msg
        }
    });
}

<div id="drag-area" style="width:500px;height:300px;background:#ffcccc;border:#ff0000 solid 1px;"> <p>アップロードするファイルをドロップ</p> <div id="result"></div>

Answer 1

似てる事例を探してみました。参考になりますでしょうか。

ファイルアップ時に進捗を表示する方法 | ScrapEngineer
http://scrap.php.xdomain.jp/js_uploade_progress/

Comments

[masa-0402]

m6u様　ご回答ありがとうございます。実は私もこの事例を参考に一部コードを自分のプログラムにあてはまるようやった次第です。多少いじってますので　もしかしたらその部分がねらった動きにならない原因かもしれないので　折角m6u様から　ご回答いただいたので落ち着いてコード見直してみます。貴重な時間を割いていただきありがとうございます。またご報告させていただきます。