OSS で利用できる機能
ファイル アップロード - TypeScript
このサンプルでは、ファイル アップロードのインスタンス化で TypeScript の使用を紹介します。
このサンプルは CTP 機能を使用しています。製品版では、API や動作が変更される場合があります。
1 MB より大きいファイルはアップロードできません。
このサンプルは、より大きい画面サイズのためにデザインされました。
モバイル デバイスで画面を回転、フル サイズ表示、またはその他のデバイスにメールで送信します。
getFileInfoData メソッドはアップロード統計情報の作成で使用されます。
注: アップロードするファイルは 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" />
<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>
<style type="text/css">
.container-info, .error-info {
margin: 10px 0;
font-weight: bold;
}
.error-info {
color: #FF0000;
}
</style>
</head>
<body>
<div id="igUpload"></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 src="/TypeScriptSamples/file-upload/typescript.js"></script>
</body>
</html>
/// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />
$(function () {
function showAlert(args) {
$("#error-message").html(args.errorMessage).stop(true, true).fadeIn(500).delay(3000).fadeOut(500);
}
var timeOutID;
var startTimer = function () {
var currCount = parseInt($('#timeElapsed').html(), 10);
$('#timeElapsed').html(String(currCount + 1));
timeOutID = setTimeout(startTimer, 1000);
}
function areAllFilesUploaded() {
var uploadInfo = $("#igUpload").igUpload('getFileInfoData');
//We use the keys countTotalFiles and countUploadingFiles to get the values acsociated with them
//knowing that we are getting and object FileInfoData
//Same techniqeue we use down for the other properties
return uploadInfo["countTotalFiles"] === uploadInfo["countUploadingFiles"];
}
function refreshProgressInformation() {
var uploadInfo = $("#igUpload").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(String(Math.round(uploadInfo["fileSizeUploaded"] / 1024)));
$("#toUpload").html(String(Math.round((uploadInfo["fileSizeTotal"] - uploadInfo["fileSizeUploaded"]) / 1024)));
$("#speed").html(uploadSpeed);
if (uploadSpeed === 0) {
$("#timeLeft").html(String(0));
} else {
$("#timeLeft").html(String(Math.round((uploadInfo["fileSizeTotal"] - uploadInfo["fileSizeUploaded"]) / (1024 * uploadSpeed))));
}
}
$('#igUpload').igUpload({
mode: 'multiple',
progressUrl: "/IGUploadStatusHandler.ashx",
maxUploadedFiles: 5,
maxSimultaneousFilesUploads: 2,
controlId: 'serverID1'
});
$("#error").css("display", "none");
$("#igUpload").on({
iguploadfileuploading: function (e, args) {
if ($("#hdnStartTimer").val() === 'false') {
$("#hdnStartTimer").val('true');
startTimer();
}
refreshProgressInformation();
}
});
$("#igUpload").on({
iguploadfileuploaded: function (e, args) {
refreshProgressInformation();
if (areAllFilesUploaded()) {
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
$("#error").css("display", "none");
}
});
$("#igUpload").on({
iguploadfileuploadaborted: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload").on({
iguploadcancelallclicked: function (e, args) {
refreshProgressInformation();
clearTimeout(timeOutID);
$("#hdnStartTimer").val('false');
}
});
$("#igUpload").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);
}
}
});
});