In this article I will explain how to preview multiple images before upload using HTML INPUT FileUpload control using JavaScript 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.
 
Note: In my previous article I have already shown Show (Display) image preview before upload using jQuery. This article is an extension of my previous article where multiple image preview is supported.
 
 
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 JavaScript
Inside the window onload event handler, an OnChange 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 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 language="javascript" type="text/javascript">
window.onload = function () {
    var fileUpload = document.getElementById("fileupload");
    fileUpload.onchange = function () {
        if (typeof (FileReader) != "undefined") {
            var dvPreview = document.getElementById("dvPreview");
            dvPreview.innerHTML = "";
            var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
            for (var i = 0; i < fileUpload.files.length; i++) {
                var file = fileUpload.files[i];
                if (regex.test(file.name.toLowerCase())) {
                    var reader = new FileReader();
                    reader.onload = function (e) {
                        var img = document.createElement("IMG");
                        img.height = "100";
                        img.width = "100";
                        img.src = e.target.result;
                        dvPreview.appendChild(img);
                    }
                    reader.readAsDataURL(file);
                } else {
                    alert(file.name + " is not a valid image file.");
                    dvPreview.innerHTML = "";
                    return false;
                }
            }
        } else {
            alert("This browser does not support HTML5 FileReader.");
        }
    }
};
</script>
 
 
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
HTML5: Show (Display) multiple image preview before upload with FileUpload control using JavaScript and jQuery
 
 
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.

Internet Explorer  FireFox  Chrome  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code