[스크립트 이벤트] 이미지 업로드 할 때, 미리보기 :: 깨알지식 , 공부공부
JavaScript2016. 12. 28. 00:26
#이미지 미리보기#
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$(function() {
$("#a").on('change', function(){
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#b').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="" runat="server">
<input type='file' id="a" />
<img id="b" src="#" alt="" />
</form>
</body>
</html>
구글링하다보면 돌아다니는 소스들이다. 개인적으로 이미지 미리보기 로직 구현할 때 알아보기 쉽고, 사용하기 쉬워 많이 선호한다. 그리고 이미지가 없을 때는 엑박모양이 등장하는데, 가리고 싶다면, img태그에 src를 제거하면 엑박모양을 사라질 것이다.
( 등록게시판 구현 중, 이미지 업로드를 하지 않았는데 , 엑박모양이 나와, 의아했던 경험이 있다.)
마지막으로 대-소문자 구분잘하자.
출처: 모질라사이트
'JavaScript' 카테고리의 다른 글
| [스크립트 이벤트] div 영역 마우스로 움직이기 :: 깨알지식 , 공부공부 (0) | 2017.09.26 |
|---|---|
| [스크립트 이벤트] Data 검색 할 때, 바로바로 출력하기 :: 깨알지식 , 공부공부 (0) | 2017.01.02 |
| [스크립트 이벤트] 체크박스 선택하기 :: 깨알지식 , 공부공부 (0) | 2016.12.30 |
| [스크립트 이벤트] 마우스 오버 시, 서브메뉴얼 표시하기. :: 깨알지식 , 공부공부 (0) | 2016.12.14 |
