Read file contents

by dshilkret

HTML

<!--Read on change:
<input id="file" type="file" /><br /-->

Read on click
<input id="fileRadOnClick" type="file"><button id="readFile">Read!</button><br />


<br>
Output 2:
<textarea id="out2" readonly></textarea>

CSS

textarea {
  width: 100%;
  height: 200px;
}

JavaScript

$("#readFile").click(function(){
	var inFile = $("#fileRadOnClick").get(0);
	console.debug(inFile.files, inFile.files[0]);
  loadFiles(inFile.files);
});
$("#file").change(function(){
  loadFiles(this.files);
});


function loadFiles(files){
	for(var i=0; i < files.length; i++){
  	var file = files[i];
  	readFileAsText(file, function(file, contents, event){
      var out2 = $("#out2");
      out2.val(contents);
      window.location.href = contents;
    });
  }
  
  
 
}


/**
 * Load passed file content as text
 */
function readFileAsText(file, callback){
var url;
		var r = new FileReader();
    r.onload = function(e) { 
      var contents = e.target.result;
      callback(file, e.target.result, e);
    }
  r.readAsText(file);
 // setTimeout(function(){ alert(url); }, 3000);   
}