이미지 업로드 후 바로 보이기

● 이미지를 업로드 한 뒤 이미지 명이 아니라 이미지를 즉각적으로 보여야 하는 경우

1. 사진을 뿌리고 있는 img 태그에 id값을 부여한다

<img id="self-img" src="이미지 경로" alt="">

 

2. input file에 onchange를 추가한다

<input type="file" name="up_files" id="upload_file" onchange="openFile(event)">

 

3. 스크립트

var openFile = function(event) {
	 var input = event.target;
	 var reader = new FileReader();
	 reader.onload = function(){
		 var dataURL = reader.result;
		 var output = document.getElementById('self-img');
		 output.src = dataURL;
	 };
	 reader.readAsDataURL(input.files[0]);
 };