In this article I will explain how to preview multiple image files before upload using HTML INPUT FileUpload control using jQuery, CSS and HTML5.
The multiple image preview is displayed using HTML5 FileReader API in browsers that support HTML5 i.e. Internet Explorer 10 and 11+, Mozilla FireFox, Google Chrome and Opera.
HTML Markup
The HTML Markup consists of an HTML FileUpload control and a DIV which will be used for displaying live preview of multiple images.
Note: For the HTML INPUT FileUpload control it is very important to set the HTML5 multiple property to multiple in order to allow multiple file selection.
<input id="fileupload" type="file" multiple="multiple" />
<hr />
<b>Live Preview</b>
<br />
<br />
<div id="dvPreview">
</div>
Multiple image preview before upload with FileUpload control using jQuery
Inside the jQuery document event handler, a change jQuery event handler has been attached to the HTML INPUT FileUpload control.
When the files are selected in the FileUpload control, first a check is perform to make sure that the browser supports HTML5 FileReader API and if it supports then a jQuery each loop is executed over the selected files in the HTML INPUT FileUpload control.
Each file is validated using Regular Expression to make sure that the selected File is a valid Image file. If the file is a valid Image file then it is read as BASE64 string using the readAsDataURL method of the HTML5 FileReader API and is set as source to a dynamic Image element which is finally attached to the HTML DIV dvPreview.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$("#fileupload").change(function () {
if (typeof (FileReader) != "undefined") {
var dvPreview = $("#dvPreview");
dvPreview.html("");
var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
$($(this)[0].files).each(function () {
var file = $(this);
if (regex.test(file[0].name.toLowerCase())) {
var reader = new FileReader();
reader.onload = function (e) {
var img = $("<img />");
img.attr("style", "height:100px;width: 100px");
img.attr("src", e.target.result);
dvPreview.append(img);
}
reader.readAsDataURL(file[0]);
} else {
alert(file[0].name + " is not a valid image file.");
dvPreview.html("");
return false;
}
});
} else {
alert("This browser does not support HTML5 FileReader.");
}
});
});
</script>
Screenshot
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
* All browser logos displayed above are property of their respective owners.
Demo
Downloads