アップロード時に選択したCSVの展開表示

サーバにアップロードする前に、CSVを内容を取得

HTML5 File APIを利用。

CSVの読み込みはPHP版をjQuery版に置き換え。

jQuery

$(function() { // アップロードするファイルを選択 $('input[type=file]').change(function() { var file = $(this).prop('files')[0]; var reader = new FileReader(); reader.onload = function() { var contents = reader.result; // 改行で分割 lf = contents.split("\r\n"); var pre_num = 0; var pre_line = ''; var lines = []; var i = 0; $.each(lf, function(lfKey, lfVal) { // 改行毎のダブルクオート数 var sum_num = lfVal.split('"').length - 1 + pre_num; if (pre_line == '') { multi_line = lfVal; } else { // 改行で前行と結合 multi_line = pre_line + "\r\n" + lfVal; } if (sum_num % 2 == 0) { // ダブルクオートが偶数 lines[i] = multi_line; pre_num = 0; pre_line = ''; i++; } else { // ダブルクオートが奇数 pre_num = sum_num; pre_line = multi_line; } }); if (lines.length > 0) { var data = []; $.each(lines, function(linesKey, linesVal) { linesVal = $.trim(linesVal.replace(/(^[\s]+|[\s]+$)/g, '')); // 空行は除外 if (linesVal !== '') { // カンマで分割 var cell = linesVal.split(','); var pre_num = 0; var pre_data = ''; var arr = []; var j = 0; $.each(cell, function(cellKey, cellVal) { // カンマ毎のダブルクオート数 if (pre_data == '') { multi_data = cellVal; } else { // カンマで前セルと結合 multi_data = pre_data + "," + cellVal; } if (sum_num % 2 == 0) { // ダブルクオートが偶数 // セル前後のダブルクオートを削除 multi_data = $.trim(multi_data.replace(/(^"+|"+$)/g, '')); // セル内の""を"へ置換 multi_data = multi_data.replace(/""/g, '"'); arr[j] = multi_data; pre_num = 0; pre_data = ''; j++; } else { // ダブルクオートが奇数 pre_num = sum_num; pre_data = multi_data; } }); data[linesKey] = arr; } }); } // table生成 $('#csv').html('<table><tbody></tbody></table>'); $.each(data, function(dataKey, dataVal) { $('tbody').append('<tr id="row' + dataKey + '"></tr>'); $.each(dataVal, function(data2Key, data2Val) { // セル内改行を<br>へ data2Val = data2Val.replace(/(\r\n|\n)/g, '<br>'); $('tr[id=row' + dataKey + ']').append('<td>' + data2Val + '</td>'); }); }); } // SJIS指定 reader.readAsText(file, 'SJIS'); }); });

File APIはIE9以下では使用不可。

HTML

<form enctype="multipart/form-data" method="post"> <input type="file" name="userfile" accept=".csv"> </form> <div id="csv"></div>

サンプル

最新の記事

プロフィール

流されるままにウェブ業界で仕事しています。
主にLAPP環境でPHPを書いています。
最近はjQueryをよく書いています。