File Upload Preview Thumbnails

See thumbnail images of uploaded files before the form is saved.

by edwardantony

HTML

<div class="form_box_item">
		<input type='file' id="input1" />
		<p><img id="image1" src="#" height="60" width="80" alt="" /></p>
	</div>

	<div class="form_box_item">
		<input type='file' id="input2" />
		<p><img id="image2" src="#" height="60" width="80" alt="" /></p>
	</div>

CSS

input[type=file]{
    position:absolute;
    opacity:0.0;
    background:#000;
    width:80px;
    height:60px;
}

JavaScript

function readURL(input) {
	if (input.files && input.files[0]){
		var reader = new FileReader();
		reader.onload = function (e) {
			var imgId = input.id.replace("input", "image");
			$("#"+imgId).attr('src', e.target.result);
		}
		reader.readAsDataURL(input.files[0]);
     }
}
function onFileInputChanged(evt)
{
	readURL(this);
}
$("#input1").change( onFileInputChanged );
$("#input2").change( onFileInputChanged );