input type=file 업로드 이미지 미리보기

게시판에서 이미지를 업로드를 하기전에 이미지 미리보기

function setImageFn(f){

	var file = f.files;
	
	if(!/\.(gif|jpg|jpeg|png)$/i.test(file[0].name)){
		alert('gif, jpg, png 파일만 선택해 주세요.\n\n현재 파일 : ' + file[0].name);
	
		f.outerHTML = f.outerHTML;

		document.getElementById('preview').innerHTML = '';

	}else {

		var reader = new FileReader();

		reader.onload = function(rst){
			document.getElementById('preview').innerHTML = '<img src="' + rst.target.result + '">';
		}
	
		reader.readAsDataURL(file[0]);

	}
}

 

<input type=file name="file" id="images" onchange="setImageFn(this)"  multiple>
<div id="preview"></div>