OSS で利用できる機能
ファイル アップロード - 進行状況インジケーター
このサンプルは jQuery アップロード コントロールの getFileInfoData パブリック メソッドの使用を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
1 MB より大きいファイルはアップロードできません。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
このメソッドの出力はアップロード統計を作成する際に便利な機能です。
注: アップロードするファイルは 1 MB 未満にする必要があります。このページにアップロードしたファイルは弊社のサーバーには保持されません。
コード ビュー
クリップボードへコピー
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<style type="text/css">
.container-info, .error-info { margin: 10px 0 ; font-weight: bold; }
.error-info { color: #FF0000; }
</style>
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
</head>
<body>
<div id="igUpload1"></div>
<div class="container-info">
<label>
平均速度:
<span id="speed">0</span>
KB/S
</label>
</div>
<div class="container-info">
<label>
アップロードしたファイル:
<span id="uploadedFiles">0</span>
</label>
</div>
<div class="container-info">
<label>
アップロード完了:
<span id="uploaded">0</span>
KB
</label>
</div>
<div class="container-info">
<label>
アップロード待ち:
<span id="toUpload">0</span>
KB
</label>
</div>
<div class="container-info">
<label>
経過時間:
<span id="timeElapsed">0</span>
秒
</label>
</div>
<div class="container-info">
<label>
残り時間:
<span id="timeLeft">0</span>
秒
</label>
</div>
<div id="error" class="error-info">
1 MB より大きいファイルはアップロードできません。
</div>
<input type="hidden" id="hdnStartTimer" value="false"/>
<script>
$('#igUpload1').igUpload({
mode: 'multiple',
progressUrl: '/IGUploadStatusHandler.ashx',
maxUploadedFiles: 5,
maxSimultaneousFilesUploads: 2,
controlId: 'serverID1'
});
function showAlert(args) {
$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
var timeOutID;
function startTimer() {
var currCount = parseInt($('#timeElapsed').html(), 10);
$('#timeElapsed').html(currCount + 1);
timeOutID = setTimeout('startTimer()', 1000);
}
function areAllFilesUploaded() {
var uploadInfo = $("#igUpload1").igUpload('getFileInfoData');
return uploadInfo.countTotalFiles === uploadInfo.countUploadingFiles;
}
function refreshProgressInformation() {
var uploadInfo = $("#igUpload1").igUpload('getFileInfoData'),
timeElapsed = parseInt($('#timeElapsed').html(), 10),
uploadSpeed;
if (timeElapsed === 0) {
uploadSpeed = 0;
} else {
uploadSpeed = Math.round(uploadInfo.fileSizeUploaded / (1024 * timeElapsed));
}
$("#uploadedFiles").html(uploadInfo.countUploadingFiles);
$("#uploaded").html(Math.round(uploadInfo.fileSizeUploaded / 1024));
$("#toUpload").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / 1024));
$("#speed").html(uploadSpeed);
if (uploadSpeed === 0) {
$("#timeLeft").html(0);
} else {
$("#timeLeft").html(Math.round((uploadInfo.fileSizeTotal - uploadInfo.fileSizeUploaded) / (1024 * uploadSpeed)));
}
}
$(function () {
$("#error").css("display", "none");
$("#igUpload1").on({
iguploadfileuploading: function (e, args) {
if ($("#hdnStartTimer").val() === 'false') {
$("#hdnStartTimer").val('true');
startTimer();
}
refreshProgressInformation();
}
});
$("#igUpload1").on({
iguploadfileuploaded: function (e, args) {
refreshProgressInformation();
if (areAllFilesUploaded()) {
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
$("#error").css("display", "none");
}
});
$("#igUpload1").on({
iguploadfileuploadaborted: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload1").on({
iguploadcancelallclicked: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload1").on({
iguploadonerror: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
if (args.errorType === 'serverside' && args.errorCode === 2) {
$("#error").stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
}
});
});
</script>
</body>
</html>