Home > Uncategorized > Javascript file handling

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&gt;
<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>

Advertisements
Categories: Uncategorized
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: