JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" multiple id="inpFileBrowser">
<div id="divGallery"></div>

JavaScript

var jqInpFileBrowser = $('#inpFileBrowser'),
                jqDivGallery = $('#divGallery');

            //監聽選擇檔案完成事件
            jqInpFileBrowser.change(function (e) {

                //清除舊圖
                jqDivGallery.empty();

                let files = e.target.files,
                    fr = new FileReader(),
                    i = 0;

                function imgLoader(){
                    for(;i<files.length;i++) {
                        if(files[i].type.slice(0,5) == 'image') {
                            fr.readAsDataURL(files[i]);
                            break;
                        }
                    }
                }

                //判斷若是圖片則讀取
                imgLoader();
                

                //設定讀取完成事件handler
                fr.onload = function (e) {
                    //秀圖
                    jqDivGallery.append('<img src="' + e.target.result + '">');
                    //繼續讀下一張圖，一個FileReader一次只能讀一個檔案，讀完才能讀下一張(可以用多個FileReader)
                    i++;
                    imgLoader();
                };

                //alert('non-blocking');

            });