How to multple image upload and preview after browse using jQuery and Javascript .


Hello Friends in this tutorials we know that . How to browse multiple image and preview image by using Javascript and Jquery

In this article i explain you step by step . How to browse multiple image and preview all image after upload . Many Project where implement this type requirement . So We seen how to do this and implement in our project . First create a index.php file . Inside this file we take a input type="file" tag which shown like as below

  <input type="file" name="image" id="image" multiple />  

 

index.php

     
<!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>
     
     
    
 
 

custom.js

    
<script>
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)	
}
</script>