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>
そもそも、IE8 以前に開発したイントラネットシステムを保守しつづける為にいろいろするわけですが、たぶんそのテストに使って削除するのを忘れてました。
自宅で処理するのは、ほぼ Google Chrome なので、影響も無く困らないから気づくはずも無く。でも、WEB アプリのテンプレートを作っていて、『お、IE もチェック』とページを表示したら、とんでもない事態に。
とにかく IE だけが動作しないので、なんとなく jQuery のバージョンを 1.9.1 に下げたらなんと・・・
ページを表示するだけで固まり、タスクマネージャーから停止させてもゾンビのように蘇る IE。再起動したり、開発者ツール開けたりしても、想像もつかないエラーばっかり。
で、以前動作確認した環境で使用した、x-ua-compatible: IE=8 のヘッダー入れると動作する。
・・・・????
さらに、x-ua-compatible: IE=11 としても動作する。
あ。
ここで、やっと互換表示設定の存在を思い出し、あけてみたら localhost が居座っていたという。
『災難の記録』
どうも原因が今イチ特定できませんが、『お気に入りバー』へ直接ドロップすると問題ありません。
▼ こういうのは出ますが
※というか、もういい加減に『お気に入りバー』って呼ぶのやめろよ……
関連する記事
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
