Skip to content

Commit fa976ac

Browse files
evanplaiceevanplaice
committed
Replace File Handling Demo
1 parent 5d4cd20 commit fa976ac

File tree

1 file changed

+57
-80
lines changed

1 file changed

+57
-80
lines changed

‎examples/file-handling.html

Lines changed: 57 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,67 @@
1-
<!doctype html>
2-
31
<html>
4-
<head>
5-
<meta charset="utf-8" />
6-
<title>Demo - CSV-to-Table</title>
7-
</head>
8-
9-
<body>
10-
<div id="inputs" class="clearfix">
11-
<input type="file" id="files" name="files[]" multiple />
12-
</div>
13-
<hr />
14-
<output id="list">
15-
</output>
16-
<hr />
17-
<table id="contents" style="width:100%; height:400px;" border>
18-
</table>
2+
<head>
3+
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
4+
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
5+
<link rel="stylesheet" href="_demo.css">
6+
</head>
197

20-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
21-
<script src="../src/jquery.csv.js"></script>
22-
<script>
23-
$(document).ready(function() {
24-
if(isAPIAvailable()) {
25-
$('#files').bind('change', handleFileSelect);
26-
}
27-
});
8+
<body>
289

29-
function isAPIAvailable() {
30-
// Check for the various File API support.
31-
if (window.File && window.FileReader && window.FileList && window.Blob) {
32-
// Great success! All the File APIs are supported.
33-
return true;
34-
} else {
35-
// source: File API availability - http://caniuse.com/#feat=fileapi
36-
// source: <output> availability - http://html5doctor.com/the-output-element/
37-
document.writeln('The HTML5 APIs used in this form are only available in the following browsers:<br />');
38-
// 6.0 File API & 13.0 <output>
39-
document.writeln(' - Google Chrome: 13.0 or later<br />');
40-
// 3.6 File API & 6.0 <output>
41-
document.writeln(' - Mozilla Firefox: 6.0 or later<br />');
42-
// 10.0 File API & 10.0 <output>
43-
document.writeln(' - Internet Explorer: Not supported (partial support expected in 10.0)<br />');
44-
// ? File API & 5.1 <output>
45-
document.writeln(' - Safari: Not supported<br />');
46-
// ? File API & 9.2 <output>
47-
document.writeln(' - Opera: Not supported');
48-
return false;
49-
}
50-
}
10+
<div id="header">
11+
<h1 id="title">Load from File</h1>
12+
<div id="link"><a href="https://github.com/evanplaice/jquery-csv">GitHub</a></div>
13+
</div>
14+
<div id="container">
15+
<section id="content">
16+
<h2>Description</h2>
17+
<p>The following demonstrates how to use the HTML5 File API to load a file from the client.</p>
18+
<hr>
19+
<h2>Input</h2>
20+
<input type="file" id="files" name="files[]" multiple />
21+
<hr />
22+
<h2>FileInfo</h2>
23+
<div id="file-info"></div>
24+
<hr />
25+
<h2>Result</h2>
26+
<textarea id="result" style="height: 250px;"></textarea>
27+
</section>
28+
</div>
5129

52-
function handleFileSelect(evt) {
53-
var files = evt.target.files; // FileList object
54-
var file = files[0];
30+
<script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
31+
<script src="../src/jquery.csv.js"></script>
32+
<script src="_helpers.js"></script>
33+
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
34+
<script>
35+
// enable syntax highlighting
36+
hljs.initHighlightingOnLoad();
5537

56-
// read the file metadata
57-
var output = ''
58-
output += '<span style="font-weight:bold;">' + escape(file.name) + '</span><br />\n';
59-
output += ' - FileType: ' + (file.type || 'n/a') + '<br />\n';
60-
output += ' - FileSize: ' + file.size + ' bytes<br />\n';
61-
output += ' - LastModified: ' + (file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a') + '<br />\n';
38+
$(document).ready(function() {
39+
if(isFileAPIAvailable()) {
40+
$('#files').bind('change', handleDialog);
41+
}
42+
});
6243

63-
// read the file contents
64-
printTable(file);
44+
function handleDialog(event) {
45+
var files = event.target.files;
46+
var file = files[0];
6547

66-
// post the results
67-
$('#list').append(output);
68-
}
48+
var fileInfo = `
49+
<span style="font-weight:bold;">${escape(file.name)}</span><br>
50+
- FileType: ${file.type || 'n/a'}<br>
51+
- FileSize: ${file.size} bytes<br>
52+
- LastModified: ${file.lastModifiedDate ? file.lastModifiedDate.toLocaleDateString() : 'n/a'}
53+
`;
54+
$('#file-info').append(fileInfo);
6955

70-
function printTable(file) {
71-
var reader = new FileReader();
72-
reader.readAsText(file);
73-
reader.onload = function(event){
74-
var csv = event.target.result;
75-
var data = $.csv.toArrays(csv);
76-
var html = '';
77-
for(var row in data) {
78-
html += '<tr>\r\n';
79-
for(var item in data[row]) {
80-
html += '<td>' + data[row][item] + '</td>\r\n';
81-
}
82-
html += '</tr>\r\n';
56+
var reader = new FileReader();
57+
reader.readAsText(file);
58+
reader.onload = function(event){
59+
var csv = event.target.result;
60+
var data = $.csv.toArrays(csv);
61+
$('#result').empty();
62+
$('#result').html(JSON.stringify(data, null, 2));
8363
}
84-
$('#contents').html(html);
85-
};
86-
reader.onerror = function(){ alert('Unable to read ' + file.fileName); };
87-
}
88-
</script>
89-
</body>
64+
}
65+
</script>
66+
</body>
9067
</html>

0 commit comments

Comments
 (0)