Below is simple code snippet.
<html>
<body>
<input id="inp" type='file' onchange="readFile" multiple />
<p id="b64_0"></p>
<img id="img_0" height="150px">
<p id="b64_1"></p>
<img id="img_1" height="150px">
<p id="b64_2"></p>
<img id="img_2" height="150px">
<script type="text/javascript">
function readFile(event) {
let files;
files = event.target || {};
files = files.files || [];
if (files.length <= 3) {
for(let i = 0; i < files.length; i++) {
var FR = new FileReader();
FR.addEventListener("load", function(e) {
document.getElementById("img_"+i).src = e.target.result;
// below statement is nothing but base64 encoding of file.
// it is useful when we have to upload file by sending base64 encoded string
document.getElementById("b64_"+i).innerHTML = e.target.result;
});
FR.readAsDataURL(this.files[i]);
}
} else {
alert('maximum 3 files can be uploaded');
}
}
document.getElementById("inp").addEventListener("change", readFile);
</script>
</body>
</html>
More details about this I will publish later
