アップロード時に選択した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>
サンプル
