이미지를 올리기 전 미리보기를 구현해보자!
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div id="previewDiv"></div>
<input type="file" id="imgInput" onchange="readURL(this)">
<script>
function readURL(obj) {
let reader = new FileReader();
if(!obj.files.length) {
return;
}
reader.readAsDataURL(obj.files[0]);
reader.onload = function (e) {
let img = $('<img />');
$(img).attr('src', e.target.result);
$('#previewDiv').append(img);
}
}
</script>
</body>
</html>
우선 제이쿼리를 사용하기 위해 링크를 걸어준다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
body에 div를 선언하고, input 태그에 onchange 이벤트가 발생할 때 스크립트에 만들어 논 함수를 실행한다.
파라미터엔 this를 넣어준다.
this = 해당 태그의 객체
<div id="previewDiv"></div>
<input type="file" id="imgInput" onchange="readURL(this)">
파일에 이미지를 업로드하고 클릭을 하게 되면 readURL함수가 실행되고 매개변수로 객체를 받게 된다.
FileReader를 불러오고, 매개변수로 넘어온 값의 길이가 0일 경우 return
readAsDataURL() 함수를 통해 File에서 읽는다.
readAsDataURL() 읽어 온 후 onload가 실행되는데 이때 img태그를 생성하여, img태그에 src를 url로 넣어준 후 div에 img를 추가해준다.
function readURL(obj) {
let reader = new FileReader();
if(!obj.files.length) {
return;
}
reader.readAsDataURL(obj.files[0]);
reader.onload = function (e) {
let img = $('<img />');
$(img).attr('src', e.target.result);
$('#previewDiv').append(img);
}
}'IT > JavaScript' 카테고리의 다른 글
| [JavaScript] Date() format, DatePicker() format 등..(나의 참고용) (0) | 2022.10.13 |
|---|---|
| [JavaScript] JSON 안에 배열 추가, 배열 안에 JSON 추가 (0) | 2022.10.12 |
| [JavaScript] 정규식 util 함수 만들어서 사용하기! (feat. JQuery) (0) | 2021.11.30 |
| [JavaScript] window객체 정의 / 메서드 (0) | 2021.10.13 |
| [AJAX] Ajax에서 servlet 접근해서 데이터 가져오기 (0) | 2021.06.16 |