Upload file uzantı kontrolu yapamıyorum

13-09-2014, 12:40:39

Merhaba arkadaşlar,
Bir form yaptım ve yazılarla beraber bir adet fotoğraf yükletiyorum.
Aşağıdaki resimdede görüldüğü gibi kullanıcı bir fotoğraf seçtiginde yüklemeden önce otomotik ön izlenebiliniyor. Ben birde uzantı ve boyut kontrolu eklemek istiyorum.

Yani kullanıcı resmi seçecek, ön izlemeyi görecek
eger uzantıda ve boyutta bir sorun varsa anlık olarak
alt kısımda yazmasını istiyorum.

Bana sadece jquery kodları lazım.. Boyut ve uzantı kontrol kodları bende mevcut

Şimdiden ilginiz için teşekkür ediyorum

13-09-2014, 13:13:16

#2

jebias

hocam ben şu şekilde yaptım;

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FileReader API</title>
</head>
<body>
	
	<h1>FileReader API</h1>
	<div>
		Resim seç: <input type="file" id="resim">
	</div>
	<div id="resimOnizleme"></div>

	<script>
		window.onload = function() {
			var resim = document.getElementById("resim");
			var resimOnizleme = document.getElementById("resimOnizleme");

			resim.addEventListener('change', function(e) {
				var file = resim.files[0];

				if (file.type.match(/image.*/) && file.size < 200000) {
					var reader = new FileReader();
					reader.readAsDataURL(file);	

					reader.onload = function(e) {
						resimOnizleme.innerHTML = "";

						var img = new Image();
						img.src = reader.result;

						resimOnizleme.appendChild(img);
					}

				} else {
					resimOnizleme.innerHTML = "Dosya boyutu veya uzantısı uygun değil."
				}
			});

		}

	</script>
</body>
</html>

Entegre etmede sorun yaşarsanız, kodlarınızı paylaşın yardımcı oluruz.

Ayrıca mutlaka Server tarafındada kontrol ettirin boyutu ve uzantıyı.

13-09-2014, 13:45:36

#3

SurucLu

@jebias
Verdiğin kod şu güzel. tüm tarayıcılarda sorunsuz çalışıyor değil mi ?
Bu kodlara 2 şey eklemeni istesem yardımıc olabilirmisin acaba..

Dosya uygun degilse inputtu boşaltsın
bide resim yuklenirken loader.gif çıksın..

13-09-2014, 14:46:28

#4

jebias

SurucLu adlı üyeden alıntı: mesajı görüntüle

@jebias
Verdiğin kod şu güzel. tüm tarayıcılarda sorunsuz çalışıyor değil mi ?
Bu kodlara 2 şey eklemeni istesem yardımıc olabilirmisin acaba..

Dosya uygun degilse inputtu boşaltsın
bide resim yuklenirken loader.gif çıksın..

tarayıcı desteğine burdan bakabilirsin.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FileReader API</title>
</head>
<body>
	
	<h1>FileReader API</h1>
	<div>
		Resim seç: <input type="file" id="resim">
	</div>

	<img src="http://ajaxload.info/images/exemples/5.gif" id="loading" style="display:none">

	<div id="resimOnizleme"></div>

	<script>
		window.onload = function() {
			var resim = document.getElementById("resim");
			var loading = document.getElementById("loading");
			var resimOnizleme = document.getElementById("resimOnizleme");

			resim.addEventListener('change', function(e) {
				loading.style.display = "block";
				var file = resim.files[0];

				if (file.type.match(/image.*/) && file.size < 200000) {
					var reader = new FileReader();
					reader.readAsDataURL(file);	

					reader.onload = function(e) {
						resimOnizleme.innerHTML = "";

						var img = new Image();
						img.src = reader.result;

						resimOnizleme.appendChild(img);
						loading.style.display = "none";
					}

				} else {
					resim.value = "";
					loading.style.display = "none";
					resimOnizleme.innerHTML = "Dosya boyutu veya uzantısı uygun değil."
				}
			});

		}

	</script>
</body>
</html>

13-09-2014, 18:51:53

#5

SurucLu

@jebias,
Hocam şahanesin.. herşey çok güzel ama yine 2 sorum olacak :/

1. Resim ön izlenirken gercek boyutlarıyla sayfaya basılıyor.. (Kurcaladım ama yapamadım)
2. Farklı bir dosyaya resim uzantısı atıp yediremezler buda değil mi ?

13-09-2014, 19:04:51

#6

jebias

SurucLu adlı üyeden alıntı: mesajı görüntüle

@jebias,
Hocam şahanesin.. herşey çok güzel ama yine 2 sorum olacak :/

1. Resim ön izlenirken gercek boyutlarıyla sayfaya basılıyor.. (Kurcaladım ama yapamadım)
2. Farklı bir dosyaya resim uzantısı atıp yediremezler buda değil mi ?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>FileReader API</title>
</head>
<body>
	
	<h1>FileReader API</h1>
	<div>
		Resim seç: <input type="file" id="resim">
	</div>

	<img src="http://ajaxload.info/images/exemples/5.gif" id="loading" style="display:none">

	<div id="resimOnizleme"></div>

	<script>
		window.onload = function() {
			var resim = document.getElementById("resim");
			var loading = document.getElementById("loading");
			var resimOnizleme = document.getElementById("resimOnizleme");

			resim.addEventListener('change', function(e) {
				loading.style.display = "block";
				var file = resim.files[0];

				if (file.type.match(/image.*/) && file.size < 200000) {
					var reader = new FileReader();
					reader.readAsDataURL(file);	

					reader.onload = function(e) {
						resimOnizleme.innerHTML = "";

						var img = new Image();
						img.width = 500;
						img.height = 250; // kesin bir boyut istemiyorsan sadece width ver hocam burayı sil yoksa orantısız olur.
						img.src = reader.result;

						resimOnizleme.appendChild(img);
						loading.style.display = "none";
					}

				} else {
					resim.value = "";
					loading.style.display = "none";
					resimOnizleme.innerHTML = "Dosya boyutu veya uzantısı uygun değil."
				}
			});

		}

	</script>
</body>
</html>

hocam kesinlikle güvenme client side'a, hiç olmadı cURL ile sahte post yaparlar gene geçerler tarayıcı tarafındaki güvenliği, mutlaka server tarafında kontrol et.