JSFiddle - React, Tailwind, and code Playground
HTML
<label class="control-label">Zdjęcia</label>
<input id="imageUpload" type="file" asp-for="Images" accept=".jpg, .jpeg, .png" multiple />
<div id="image-holder">
</div>
CSS
.thumb-image {
width: 200px;
position: relative;
padding: 5px;
}
JavaScript
$(document).ready(function(){
$("#imageUpload").on('change', function () {
var countFiles = $(this)[0].files.length;
var imgPath = $(this)[0].value;
var image_holder = $("#image-holder");
image_holder.empty();
if (typeof (FileReader) != "undefined") {
for (var i = 0; i < countFiles; i++) {
var reader = new FileReader();
reader.onload = function (e) {
$("<img />", {
"src": e.target.result,
"class": "thumb-image"
}).appendTo(image_holder);
$("<input type='radio' name='name'/>", {}).appendTo(image_holder);
}
image_holder.show();
reader.readAsDataURL($(this)[0].files[i]);
}
} else {
alert("this support does not support FileReader.");
}
}); });