결과
사진 선택 전
사진 선택 후
코드 (파일명: test.html)
<html>
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("#imgInp").on('change', function(){
readURL(this);
});
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type='file' id="imgInp" />
<img id="blah" src="#" alt="your image" />
</form>
</body>
</html>
'JavaScript 시리즈☕' 카테고리의 다른 글
| key 이벤트 [keydown, keypress, keyup 정리] (0) | 2023.09.22 |
|---|---|
| CRUD 이용해서 사용자 정보 저장 페이지 만들어보기 (0) | 2022.11.20 |
| drag and drop(드래그 앤 드랍) HTML,CSS,JS 만들기 (0) | 2022.11.20 |
| JSON 정리.txt (1) | 2022.08.02 |
| 🚀명언 적용 하기 + 배경 설정하기🚀 | JavaScript 시리즈 020 (6) | 2021.08.08 |
