<script>
document.getElementById('cover_file').onchange = function(evt) {
var file = this.files[0];
var _URL = window.URL || window.webkitURL;
var img = new Image();
var imglimitwidth = 3000;
var imglimitheight = 3000;
// 확장자 체크
if ($("#cover_file").val() != "") {
var ext = $('#cover_file').val().split('.').pop().toLowerCase();
if ($.inArray(ext, ['jpg', 'jpeg']) == -1) {
alert('JPG 파일만 업로드할 수 있습니다.');
return;
}
}
img.src = _URL.createObjectURL(file);
// 이미지 사이즈 체크 및 썸네일 생성
img.onload = function() {
if(img.width < imglimitwidth || img.height < imglimitheight) {
alert("이미지 사이즈가 " + imglimitwidth + "px x " + imglimitheight + "px 이하입니다. \n사이즈를 조정하여 다시 업로드 해주세요.");
document.getElementById('cover_file').val('');
return;
} else {
var tgt = evt.target || window.event.srcElement,
files = tgt.files;
if (FileReader && files && files.length) {
var fr = new FileReader();
fr.onload = function() {
document.getElementById("cover_img_file").src = fr.result;
}
fr.readAsDataURL(files[0]);
} else {
// 파일 API 지원 불가
}
}
}
}
</script>
반응형
'개발 > Web' 카테고리의 다른 글
input array에 대해 동일한 name이 여러개일 경우 각 요소에 대한 처리 (0) | 2020.08.03 |
---|---|
텍스트 호버 이미지 애니메이션 (0) | 2020.08.02 |
로딩 애니메이션 (0) | 2020.07.23 |
ES6(ECMAScript6) (0) | 2020.07.10 |
CSS 플러스, 마이너스 아이콘 (0) | 2020.07.05 |