автор- пользователь может загрузить на страничку csv-файл (до 1000 строк, 10 столбцов)
- содержимое файла отображается в таблице
HTML 5
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>.csv</title>
</head>
<body>
<header>
<h1>Reading .csv file...</h1>
</header>
<section>
<input type="file"
id="csvFileInput"
onchange="handleFiles(this.files)"
accept=".csv" />
<div id="info" style="color: red;"></div>
<div id="output"></div>
</section>
<script>
function handleFiles(files) {
var reader, file = files[0];
if (window.FileReader) {
reader = new FileReader();
reader.onload = function(evt) {
var lines = evt.target.result.split(/\r\n|\n/),
rows = [], i;
for (i = 0; i < lines.length; i += 1) {
rows.push(lines[i].split(/\t|;/));
}
drawOutput(rows, file);
};
reader.onerror = function(evt) {
if (evt.target.error.name === 'NotReadableError') {
console.log('Can\'t read file!');
}
};
reader.readAsText(file, 'windows-1251');
} else {
console.log('FileReader are not supported in this browser.');
}
}
function drawOutput(lines, file) {
var output = document.getElementById('output'),
info = document.getElementById('info'),
table = document.createElement('table'),
p = document.createElement('p'),
row, cell, i;
info.innerHTML = '';
output.innerHTML = '';
p.innerHTML = 'NAME: ' + file.name
+ ' TYPE: ' + file.type
+ ' SIZE: ' + file.size + ' bytes';
for (i = 0; i < lines.length; i += 1) {
row = table.insertRow(-1);
for (var j = 0; j < lines[i].length; j += 1) {
cell = row.insertCell(-1);
cell.appendChild(document.createTextNode(lines[i][j]));
}
}
output.appendChild(table);
info.appendChild(p);
}
</script>
</body>
</html>
авторпользователь может эту табличку покрутить (сортировка, поиск, проч.)
http://knockoutjs.com/examples/grid.html - почитай на досуге... ;)
