ＳＱＬの窓 イラストAC フリー素材
<< PHP : 画像を返す処理( readfile ) と画… | TOP | C# : WebClient で JSON データを取得後 … >>

2019年08月26日

IE11 : フォルダを選択して、フォルダ内のフォルダとファイルの一覧を jQuery で表示する

 
Windows の標準の COM では、ファイルを選択するダイアログを使用できません。( Excel がインストールされておれば使えます )

しかし、Shell.Application を使用すれば、フォルダの選択は可能なうえにファイルの一覧をフォルダオブジェクトより取得して利用可能です。


<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.css">

<link rel="stylesheet" href="https://lightbox.sakura.ne.jp/demo/two-section.css">

<script>
// Windows Shaell
var objShell = new ActiveXObject("Shell.Application");

$(function(){

	$("#action").on("click", function(){

		buildTable( );

	});

});

// ******************************
// jQuery でテーブル作成
// ******************************
function buildTable( ){

	// 1:0固定, 2:タイトル, 3:1はファイルシステムのみ, 4:0はルートがデスクトップ
	// 4:https://docs.microsoft.com/en-us/windows/win32/api/shldisp/ne-shldisp-shellspecialfolderconstants
	var objFolder = objShell.BrowseForFolder( 0, "フォルダ選択", 1, 0 );
	if ( objFolder == null ) {
		alert("フォルダの選択がキャンセルされました");
		return;
	}
	if ( !objFolder.Self.IsFileSystem ) {
		alert("ファイルシステムではありません");
		return;
	}

	// TABLE 部分クリア
	$("#tbl").html("");

	var objFolderItems = objFolder.Items();

	var nFiles = objFolderItems.Count;
	var arrData = [];

	// フォルダとファイルの一覧を配列にセット
	var nFiles = objFolderItems.Count;
	for( i = 0; i < nFiles; i++ ) {
		var objItem = objFolderItems.Item(i)
		// フォルダの場合
		if ( objItem.isFolder ) {
			arrData.push( " [" + objItem.Name +"]" );
		}
		else {
			arrData.push( objItem.Name );
		}
	}

	arrData.sort();
	arrData.unshift("-------------------------------------------------------------");
	// 選択したフォルダのパス
	arrData.unshift(objFolder.Self.Path);

	// TABLE に一覧を作成する
	for( i = 0; i < nFiles; i++ ) {
		var tr = $("<tr class='rowdata'></tr>")
			.appendTo("#tbl");

		$("<td></td>")
			.appendTo(tr)
			.text(arrData[i]);
	}

}
</script>

</head>
<body>
	<div id="head">
		<input
			id="action"
			class="ml-4 btn btn-outline-primary"
			type="button"
			value="フォルダ選択">
	</div>

	<div id="extend">
		<table class="table">
		<tbody id="tbl">

		</tbody>
		</table>

	</div>

</body>
</html>
【IEの最新記事】
posted by at 2019-08-26 13:30 | IE | このブログの読者になる | 更新情報をチェックする


Powered by Seesaa