<html>
<head>
<meta charset="utf-8" />
<title>Demo - CSV-to-Table</title>
<script src="jquery-1.8.0.js"></script>
<script src="jquery.csv.js"></script>
<script type="text/javascript" src="json2.js">
</script>
<script>
$(document).ready(function() {
if(isAPIAvailable()) {
$('#files').bind('change', handleFileSelect);
}
});
function isAPIAvailable() {
// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Great success! All the File APIs are supported.
return true;
} else {
document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
// 6.0 File API & 13.0 <output>
document.writeln(' - Google Chrome: 13.0 or later<br />');
// 3.6 File API & 6.0 <output>
document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
// 10.0 File API & 10.0 <output>
document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
// ? File API & 5.1 <output>
document.writeln(' - Safari: Not supported<br />');
// ? File API & 9.2 <output>
document.writeln(' - Opera: Not supported');
return false;
}
}
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var file = files[0];
// read the file contents
printTable(file);
// post the results
$('#list').append(output);
}
function printTable(file) {
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event){
var csv = event.target.result;
var data = $.csv.toArrays(csv);
var jsonStr = JSON.stringify(data);
var html = generateTable(data);
$('#result').html(html);
alert(jsonStr);
function generateTable(data) {
var html = '';
for(var row in data) {
html += '<tr>\r\n';
for(var item in data[row]) {
html += '<td>' + data[row][item] + '</td>\r\n';
}
html += '</tr>\r\n';
}
return html;
}
}
reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
}
</script>
</head>
<style>
table{
border-collapse:collapse;
alignment-adjust:central;
}
textarea {
width:100%;
}
.result {
width:100%;
overflow:auto;
}
td {
padding:5px;
}
</style>
<body>
<div id=inputs class=clearfix>
<input type=file id=files name=files[] multiple />
</div>
<div class=result>
<table id=result border=1></table>
</div>
</body>
</html>