👉 이미지 Upload & Preview (with. JS)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
<body>
<input type="file" id="fileUpload" />
<img id="preview" />
</body>
<script>
const file_input = document.getElementById("fileUpload");
const preview_img = document.getElementById("preview");
file_input.onchange = function (e) {
const img_file = file_input.files[0];
if(img_file) {
preview_img.src = URL.createObjectURL(img_file);
}
};
</script>
</html>
'HTML, CSS, JS' 카테고리의 다른 글
| [Javascript] ToastUI Editor 사용하기 - 1 (Markdown 작성 및 Preview) (0) | 2022.07.22 |
|---|---|
| [Javascript] destructuring assignment - Uncaught (in promise) TypeError: Cannot set properties of undefined 에러 (0) | 2022.07.20 |
| [JavaScript, JQuery] HTML Import 하는 방법 (0) | 2022.07.10 |
| [JavaScript] 로컬스토리지 vs 세션 스토리지 (0) | 2022.07.10 |
| [Javascript] 업로드 이미지 BE와 주고 받기(FE, by Blob 객체) (0) | 2022.07.10 |