Develop
javascript file loading
작은이야기
2016. 7. 25. 14:23
<html>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function upload()
{
$('#hiddenUploadBtn').click();
}
function fileOpen(evt)
{
var tagStr = '<p>' + evt.target.files[0].name + '</p>';
$('#container').append(tagStr);
handleFiles(evt.target.files);
}
$(document).ready(function(){
$('#hiddenUploadBtn').change(fileOpen);
});
function handleFiles(files) {
// Check for the various File API support.
if (window.FileReader) {
// FileReader are supported.
getAsText(files[0]);
} else {
alert('FileReader are not supported in this browser.');
}
}
function getAsText(fileToRead) {
var reader = new FileReader();
// Read file into memory as UTF-8
reader.readAsText(fileToRead);
// Handle errors load
reader.onload = loadHandler;
reader.onerror = errorHandler;
}
function loadHandler(event) {
var csv = event.target.result;
processData(csv);
}
function processData(csv) {
var allTextLines = csv.split(/\r\n|\n/);
var lines = [];
for (var i=0; i<allTextLines.length; i++) {
var data = allTextLines[i].split(',');
var tarr = [];
for (var j=0; j<data.length; j++) {
tarr.push(data[j]);
}
lines.push(tarr);
var tagStr = '<p>' + allTextLines[i] + '</p>';
$('#container').append(tagStr);
}
console.log(lines);
}
function errorHandler(evt) {
if(evt.target.error.name == "NotReadableError") {
alert("Canno't read file !");
}
}
</script>
<form name="kk">
<input type="button" value="업로드" onClick="upload()">
</form>
<div style="display:none">
<form name="hiddenFrm" id="hiddenFrm">
<input type="file" id="hiddenUploadBtn">
</form>
</div>
<div id="container">
</div>
</html>