JSFiddle - React, Tailwind, and code Playground

by mustafa yılmaz

HTML

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>jquery-resim-onizle-yukle</title>
	<style type="text/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:#fcf;overflow:hidden;}
	.ad{float:left;width:1050px;min-height:100px;background:#fcf;overflow:hidden;}
	</style>
	<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/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;
			var verioku=new FileReader();
			verioku.onload=function(e){
				var rever=e.target.result;
				$('.kabuk').append('<img src="'+rever+'"/>');
				bilgi.t[bilgi.j]=rever;
				$('.b').append(bilgi.t[bilgi.j]+'<br />');
				$('.ad').append(rad+'<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
		}
	};
	</script>
</head>
<body>
	<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>
</body>
</html>