ＳＱＬの窓
<< jQuery プラグイン … | TOP | jQuery UI のタブを… >>

2020年05月19日


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

 


デモページ1( INPUT要素 type="file" )

デモページ2( ドラッグ & ドロップ )


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

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

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

ソースコード( INPUT要素 type="file" )

<!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.5.0/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

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

<script>

$(function(){
	$("#fire_reader").on("change", function(){

		// テーブルのクリア
		$("#tbl").html("");

		// multiple でなければループは一回だけ
		for( i = 0; i < this.files.length; i++ ) {

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

			// FileReader にデータが読み込まれた時のイベント
			var rows = "";
			var cols = "";
			var tr = null;
			$(reader).on("load", function () {

				// \r を全て削除
				var data = this.result.replace(/\r/g,"");

				// \n で行を分ける
				rows = this.result.split("\n");
				$.each( rows, function( idx, value ){
					// 空行を無視
					if ( value == "" ) {
						return;
					}
					cols = value.split(",");
					// 行を作成
					tr = $("<tr></tr>").appendTo("#tbl");
					$.each( cols, function( idx, value ){
						// TD を追加して、テキストをセット

						switch( idx ) {
							case 7:
							case 8:
								// 数値項目はカンマ編集で右寄せ
								$("<td></td>").appendTo(tr)
									.text(value.number_format())
									.css({"text-align": "right" });
								break;

							default:
								$("<td></td>").appendTo(tr)
									.text(value);
						}

					} )
				} )
			});

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

	// **************************************
	// このページ自身の QRコードの表示
	// **************************************
	$('#qrcode')
		.css({ "margin" : "20px 20px 20px 20px" })
		.qrcode({width: 160,height: 160,text: location.href });

});
</script>
</head>
<body>
	<div id="head">
		<input type="file" id="fire_reader" name="fire_reader">
	</div>

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

		</tbody>
		</table>

		<div id="qrcode"></div>
	</div>


</body>
</html>



ソースコード( ドラッグ & ドロップ )

<!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 http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
* {
	font-size:16px;
	font-family: Arial, Helvetica, Verdana, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
}
#list {
	border-collapse: collapse;
}
#list td {
	padding: 5px;
	border: solid #000000 1px;
	white-space: nowrap;
}
#file_drop {
	height:30px;
	padding:10px;
	text-align: center;
	margin-bottom:8px;
	border: solid #000000 1px;
}
</style>
</head>
<body>
<div id="file_drop">ここにドロップ</div>
<table id="list"></table>
<script>

$("#file_drop").on("dragenter", function(e){
	e.stopPropagation();
	e.preventDefault();

	$(this).css("background-color","#ddd");

	console.log("dragenter");
	
} );
$("#file_drop").on("dragover", function(e){
	e.stopPropagation();
	e.preventDefault();	

} );
$("#file_drop").on("dragleave", function(e){
	e.stopPropagation();
	e.preventDefault();	

	$(this).css("background-color","#fff");
} );
$("#file_drop").on("drop", function(e){
	e.stopPropagation();
	e.preventDefault();		

	$(this).css("background-color","#fff");

	var files = e.originalEvent.dataTransfer.files;
	for( i = 0; i < 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 (files[i]) {
			reader.readAsText(files[i],"shift_jis");
		}
	}
	
} );

$(document).on('dragenter', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('dragover', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});
$(document).on('drop', function (e)
{
	e.stopPropagation();
	e.preventDefault();
});


</script>
</body>
</html>



関連する記事

ブラウザ上のテキストデータを名前を付けて保存できる FileSaver.js を使って、テーブルのデータを Excel で開ける事を想定した CSV にして PC に保存
【jQueryの最新記事】
posted by lightbox at 2020-05-19 21:27 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり