In this tutorial we will learn about how to multiple image previews after choosing. In this article, I will explain step by step, how to browse multiple images and preview all images after choosing an image . We have to implement this type of functionality in many projects . You can use these snippets in your project.
<input type="file" name="image" id="image" multiple />
<!DOCTYPE html>
<html lang="en">
<head>
<title>Browse Multiple Image and Preview</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<link rel="icon" href="favicon_icon.png" />
</head>
<body>
<div class="container" style="margin-top:100px;">
<h2 class="banner_heading">Browse Multiple Image and Preview</h2>
<hr />
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="category">Input</label>
<div class="form-group" style="margin-top:10px;">
<input type="file" name="image" id="image" multiple />
</div>
</div>
</div>
</div>
<div class="row" style="margin-top:25px;">
<div class="col-sm-6">
<div class="form-group">
<label for="category">Image Preview</label>
<div class="form-group" style="margin-top:10px;" id="response">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
function readFile() {
if (this.files && this.files[0]) {
var FR = new FileReader();
FR.addEventListener("load", function (e) {
append_image(e.target.result);
});
FR.readAsDataURL(this.files[0]);
}
}
document.getElementById("image").addEventListener("change", readFile);
function append_image(src_data) {
var img = '<img id="img" height="150"
width="150" class="img img-thumbnail"
src="' + src_data + '" />';
$("#response").append(img)
}