HTML5: Selected image preview jQuery plugin

I think lot of programmers are disappointed with the HTML file upload control. For many years that was a control with very limited functionality. Thanks to HTML5 situation is changing now and we are gettin some tools to improve usability of web interfaces that are using file uploads. Today I played a little with the code and as a result got a primitive jquery module. I know that some more mature jquery plugins are available and can be found in the Internet. However I decided to prepare very basic module for myself to be able to customize it for each project where I will need this plugin.

If someone is interested in javascript code details I am going brifely describe some logic, if you are interested in  jQuery code itself you may scroll down and download the code from GetHub. First of all it is possible now to allow user to select multiple files:

<input class="file" id="file2" type='file' multiple/>

I am mentioning this because when we will use data of file input from javascript we should remember that it is always works the same way, like there are several files selected and there is no diffrerence one file selected or multiple:

for(i=0; i<input.files.length; i++){
   document.write(input.files[i].type+"<br/>");
}

As you can see files property is an array, each of them has some properties describing the file. But right now it is not very important and we can go to the next step. Once the file or files are selected we should use FileReader object to read local file:

for(i=0; i<this.files.length; i++){
	var reader = new FileReader();
	reader.onload = function (e) {
		$('<img />').attr({'src': e.target.result}).appendTo($('#preview'));
	};
	reader.readAsDataURL(this.files[i]);
}

Here I should notice that image SRC property is filled by data directly as I have described in my previous article about embeded images. This becoming quite popular feature and is widely used in javascript now.

I hope that algorightm is quite clear now and I can show the code usage example itself. Plugin should be applied to the elements as any other jQuery plugin:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="jquery.preimage.js"></script>
<script>

$(document).ready(function()
{
	$('.file').preimage();
});

</script>

<meta charset=utf-8 />
<title>jQuery file upload</title>
</head>
<body>
	<input class="file" id="file1" type='file' multiple title="test #1"/>
	<div id="prev_file1"></div><br/>
	
	<input class="file" id="file2" type='file' multiple title="test #2"/>
	<div id="prev_file2"></div>
</body>
</html>

Click here to see example in action. And on GitHub you can find jQuery plugin code, as promissed.

Follow my blog, as I will probably publish more areticles abut file uploads and handing soon. And let me know if you have some ideas of code improvement and what features you are interested in.

Posted by:
Enjoyed this post? Share and Leave a comment below, thanks! :)
Tags: , , , , , ,