[JavaScript] 싱글/멀티 프리뷰 코드 샘플
JavaScript 파일 선택 싱글/멀티 프리뷰 기능
<!doctype html>
<html lang="ko" class=""><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>미리 보기</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
var kSelect_files = [];
function onPreviewImg(url) {
if (url.files && url.files[0]) {
var kFileArr = Array.prototype.slice.call(url.files);
kFileArr.forEach(function(kFile) {
if(!kFile.type.match("image.*")) {
alert("이미지 파일만 가능합니다.");
return;
}
kSelect_files.push(kFile);
var pkFileReader = new FileReader();
pkFileReader.onload = function (e) {
if(url.files[0] == kFile ) { $('#firstImg').attr('src', e.target.result); }
var kImgUrl = "<img src=\"" + e.target.result + "\" />";
$("#otherImg").append(kImgUrl);
i++;
}
pkFileReader.readAsDataURL(kFile);
});
}
}
$(function() {
$("#userUploadImg").on('change', function(){
onPreviewImg(this);
});
});
</script>
</head>
<header>
<header>
<body>
<div>
<h1> 이미지 싱글/멀티 프리뷰 </h1>
<input id="userUploadImg" type="file" multiple />
</div>
<br>
<div>
<h5> 첫 이미지 </h5>
<h6> 선택창에서 하나만 선택하고 싶을 땐 "imput" 테그에 "multiple"속성을 제거 </h6>
<img id="firstImg"/>
</div>
<br>
<div>
<h5> 두번째 부터 </h5>
<div id="otherImg"> </div>
</div>
</body>
</html>
댓글
댓글 쓰기