filereader in html5

by awolf2904

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<input type="file" id="openselect" />
<textarea id="showresult"></textarea>

CSS

#showresult {
  width:98%;
  height: 300px;    
}

JavaScript

var demoTxt = "0.0   5.2\
0.5   5.6\
1.0   6.3";

var flag_usedemofile = true; //if true var demoTxt will be used

function doOpen(evt) {
  var files = evt.target.files,
      reader = new FileReader();
    reader.onload = function() {
        if ( !flag_usedemofile) {
            var arraydata = $.csv.toArrays(this.result,{separator:'   '});
            showout.value = this.result;
        } else {
            var arraydata = $.csv.toArrays(demoTxt,{separator:'   '});
            showout.value = arraydata;
            console.log(arraydata);
        }
    };
    reader.readAsText(files[0]);
}
    
var openbtn = document.getElementById("openselect"),
    showout = document.getElementById("showresult");
openselect.addEventListener("change", doOpen, false);