이미지 파일을 업로드 하기전 미리 보는 예제입니다.
* 기능
- 이미지 파일을 선택하면 업로드 하기전 바로 보여줍니다.
- 이미지 파일만 선택할 수 있도록 기본적인 체크적용.
실제로 작동하는 예제입니다.
파일을 선택해 보세요 ^^*
등록일 : ,
업로드전 이미지 미리보기
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]);
}
}
관련 링크
이 예제의 작동 원리 설명
방문해 주셔서 감사드립니다 !!