JSFiddle - React, Tailwind, and code Playground
HTML
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
<!-- language: lang-html -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type='file' id="inputImg" multiple/><br>
</form>
<!-- end snippet -->
JavaScript
$("#inputImg").change(function() {
readURL(this);
});
function readURL(input) {
if (input.files && input.files[0]) {
for(x in input.files){
var reader = new FileReader();
reader.readAsDataURL(input.files[x]);
reader.onload = function(e) {
$('<img style="max-width:50px">').appendTo("form").attr('src', e.target.result);
}
}
}
}