코딩 공부/JS
[script] - 이미지 프리뷰, 이미지 용량 체크
hg_96
2022. 1. 11. 14:39
이미지 프리뷰
function previewImage(f, getid){
// 변수로 this와 프리뷰를 보여줄 아이디를 사용, 이미지인풋에 onchange="previewImage(this, '썸네일영역아이디')"
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(getid).innerHTML = '<img src="' + rst.target.result + '" style="float: left; width:200px; height: 200px; ">';
}
// 파일을 읽는다
reader.readAsDataURL(file[0]);
}
}
이미지 용량(크기) 체크
function checkFile(el){
// 이미지인풋에 onchange="checkFile(this)"
var file = el.files;
if(file[0].size > 1024 * 1024 * 5){
alert('5MB 이하 파일만 등록할 수 있습니다.\n\n' + '현재파일 용량 : ' + (Math.round(file[0].size / 1024 / 1024 * 100) / 100) + 'MB');
}
else return;
el.outerHTML = el.outerHTML;
}