SQLの窓

2017年06月04日


FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する



デモページ

type="file" でローカルのファイルを指定して、キャラクタセットを指定して読み込みます。ここでは、input 要素に multiple を指定していないのでファイルは一つしか指定できませんが、multiple を指定して追加の処理(cssファイルを読み込んでテーブルの見た目を調整する等)を行うのもいいでしょう。

※ 処理は、multiple を想定して files.length ぶんループしています
※ JavaScript のコレクション処理は、$.each を使う必要があります。

input に accept="text/*" を指定できますが、csv は対象では無かったので使用していません。画像を使う場合には絶対に使用する必要があるでしょう。



ソースコード
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<style>
#list {
	border-collapse: collapse;
}
#list  td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
</style>
<input type="file" id="row1_fld" name="row1_fld">
<table id="list"></table>
<script>
$("#row1_fld").on("change", function(){

	for( i = 0; i < this.files.length; i++ ) {

		// FileReader は毎回作成(同時に複数のファイルを扱えない)
		var reader = new FileReader();

		// FileReader にデータが読み込まれた時のイベント
		var token1 = "";
		var token2 = "";
		var tr = null;
		$(reader).on("load", function () {
			token1 = this.result.split("\n");
			$.each( token1, function( idx, value ){
				// 空行を無視
				if ( value == "" ) {
					return;
				}
				token2 = value.split(",");
				// 行を作成
				tr = $("<tr></tr>").appendTo("#list");
				$.each( token2, function( idx, value ){
					// TD を追加して、テキストをセット
					$("<td></td>").appendTo(tr)
						.text(value);
				} )
			} )
		});

		// 上記イベントを発動するための処理( this.files[i] は blob )
		if (this.files[i]) {
			// CSV は通常 shift_jis なので、指定します
			reader.readAsText(this.files[i],"shift_jis");
		}
	}

});
</script>



【jQueryの最新記事】
posted by lightbox at 2017-06-04 12:11 | Comment(0) | jQuery | このブログの読者になる | 更新情報をチェックする
バッチ処理

Microsoft Office
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

Android SDK ポケットリファレンス
改訂版 Webデザイナーのための jQuery入門
今すぐ使えるかんたん ホームページ HTML&CSS入門
CSS ドロップシャドウの参考デモ
PHP正規表現チェッカー
Google Hosted Libraries
cdnjs
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり