JSFiddle - React, Tailwind, and code Playground

by Iftakharul Alam

HTML

<div class="col-sm-6">
 <div class="form-group">
 <label for="images">Multiple Images</label>
 <input type="file" id="images" multiple accept="image/*" />
 </div>
 <div id="multiplePreview"></div>

CSS

.thumbnail{
    border-radius:5px;
    margin: 5px;
}

JavaScript

$('#images').on('change', function(event) {

 var images = this.files; // not $(this)
 
 //$('#multiplePreview').html(''); 
 
 $.each(images, function(index, val) {
 var reader = new FileReader(); 
 reader.onload = function(e){ 
 $('<img src="' + e.target.result + '" class="thumbnail img-responsive pull-left" width="150" height="100" alt="Loading..">').appendTo($('#multiplePreview'));

 }
 reader.readAsDataURL(val); 
 });
 });