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ı.