자바스크립트 예제모음

파일 업로드 이미지 미리보기

전체 문자열 배열 폼관련
등록일 :

업로드전 이미지 미리보기

이미지 파일을 업로드 하기전 미리 보는 예제입니다.

* 기능
- 이미지 파일을 선택하면 업로드 하기전 바로 보여줍니다.
- 이미지 파일만 선택할 수 있도록 기본적인 체크적용.

실제로 작동하는 예제입니다.
파일을 선택해 보세요 ^^*


이미지 파일을 선택해 보세요.




HTML

이미지 파일을 선택해 보세요.<br><br>

<input type="file" name="files1" accept="image/*" onchange="previewImage(this)" />
<div id="preview"></div>

<br><br>

자바스크립트

function previewImage(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 {

		// FileReader 객체 사용
		var reader = new FileReader();

		// 파일 읽기가 완료되었을때 실행
		reader.onload = function(rst){
			document.getElementById('preview').innerHTML = '<img src="' + rst.target.result + '">';
		}

		// 파일을 읽는다
		reader.readAsDataURL(file[0]);

	}
}