JSFiddle - React, Tailwind, and code Playground

HTML

<input type="file" id="resim" multiple onChange="bilgi()"/>
	<input type="button" onclick="yukle()" value="Seçilen Resimleri Yükle"/>
	 <br />
	<div class="kabuk"></div>
	<div class="b"></div>
	<div class="ad"></div>

CSS

.kabuk{float:left;width:1050px;min-height:80px;background:#cfc;}
	.kabuk img{float:left;margin:0;width:48;height:48}
	.b{float:left;width:1050px;min-height:100px;background:#abc;overflow:hidden;}
	.ad{float:left;width:1050px;min-height:100px;background:#fcf;overflow:hidden;}

JavaScript

bilgi.t=new Array();
	bilgi.j=0;
	function bilgi(){   
		var adet=document.getElementById ("resim").files.length;
		for(i=0;i<adet;i++){			
			var rb=document.getElementById ("resim").files[i];
			var rad=document.getElementById ("resim").files[i].name+" "+document.getElementById ("resim").files[i].size+" "+document.getElementById ("resim").files[i].type;
            $('.ad').append(i+1+'.resim özellikleri..:'+rad+'<br />');
           // $('.b').append(bilgi.t[bilgi.j]+'<br />');
			var verioku=new FileReader();
			verioku.onload=function(e){
				var rever=e.target.result;
               // e.target.files
				$('.kabuk').append('<img src="'+rever+'" width="140" height="140"/>');
				bilgi.t[bilgi.j]=rever;
				//$('.b').append(bilgi.t[bilgi.j]+'<br />');
			//	$('.ad').append(rad+i+'<br />');
			};
			verioku.readAsDataURL(rb);
			bilgi.j++;
		}
	};
	
	function yukle(){
		if(bilgi.j!=0){
			resimler=bilgi.t;
			$.post("kayit.php",{"veri":resimler},function(r){
				//yüklendi ise 
			});	
		}else{
			//resim seçilmedi ise
		}
	};