ファイルアップロード状況をプログレスバー表示する
クスパでは料理教室の先生が作成したレッスン動画の有料配信サービスを展開していますが、動画をアップロードする際にファイルサイズが大きい為進捗状況を表示する必要がありました。そこで、今回はアップロード状況をプログレスバー表示する方法を紹介します。
アップロード状況を表示するには
アップロード状況を表示するには、XHR(XMLHttpRequest)のuploadプロパティを利用することで実現可能です。
上記APIを利用すると、非同期でアップロード状況を取得することが出来ます。今回はjQueryを利用したサンプルを紹介します。
※ライブラリとして、jQuery／jQuery Form Pluginを利用していますが、サンプルでは割愛しています。
<html>
<head>
<script>
$(function () {
$('.upload').on('click', function (evt) {
var formData = new FormData();
formData.append("file", $(".file")[0].files[0]);
var progressBar = document.getElementById('prog');
var progressValue = document.getElementById('pv');
$.ajax({
url: 'アップロード用のAPI等を指定',
type: 'POST',
processData: false,
contentType: false,
async: true,
data: formData,
xhr : function(){
XHR = $.ajaxSettings.xhr();
if(XHR.upload){
XHR.upload.addEventListener('progress',function(e){
var progVal = parseInt(e.loaded/e.total*10000)/100 ;
progressBar.value = progVal;
progressValue.innerHTML = progVal + '%';
}, false);
}
return XHR;
},
success: function (data) {
console.log(data);
$('.message').append('success\n');
},
error: function () {
$('.message').append('failure\n')
}
});
});
});
</script>
<title>upload</title>
</head>
<body>
<input class="file" type="file" name="file" /><br />
<input class="upload" type="button" value="upload" />
<div class="message"></div>
<progress value="0" id="prog" max=100></progress>(<span id="pv" style="color:#00b200">0%</span>)
</body>
</html>
サンプルの解説
上記サンプルを実行すると下記画面が表示されます。
[ファイルを選択]にて事前にファイル選択しておき、uploadボタンをクリックするとアップロードを開始します。 その際に、以下の様にXHRにてuploadプロパティのprogressイベントを定義しておきます。
XHR.upload.addEventListener('progress',function(e){
次に、progressイベント発生毎にアップロード済みサイズ(loaded)、トータルサイズ(total)が取得できますので以下の様に100％値に換算します。
var progVal = parseInt(e.loaded/e.total*10000)/100 ;
上記にて換算した値を以下の様にプログレスバーに随時設定することで進捗状況を表示することが出来ます。
progressBar.value = progVal;
