Javascript file handling
The FileReader object is a new feature of HTML5, and it allows handling of file-data on the client side of a web-application, so for instance, you could provide extra validation on an uploaded file before sending it to the server.
Here’s a simple example of it’s use:
<html>
<head>
<script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>
<script language=”javascript”>
$(init);
function init()
{
console.log(“Good to go!”);
$(“#myFile”).change(myFile_change);
}
function myFile_change(evt)
{
console.log(“myFile_change”);
console.log(evt.target.files[0]);
var f = evt.target.files[0];
reader = new FileReader();
reader.readAsDataURL(f);
reader.onload = function(e) {
console.log(reader.result);
$(“#imgUpload”).attr(“src”,reader.result);
}
}
</script>
</head>
<body>
<input type=”file” id=”myFile”>
<img id=”imgUpload”>
</body>
</html>
