-
초보자도 만들 수 있는 파일첨부 및 이미지 미리보기 기능Study/JavaScript 2025. 1. 9. 23:10반응형
신입때는 간단한 기능 단위별로 구현을 많이 하는데,
그중 제일 기초가 될 수 있는 파일첨부 기능에 대해서 아주 간단한 로직으로 설명 하고자함.
파일 첨부 기능은 간단하다면 간단할 수 있지만 아무것도 모르는 학원수강생 시절 파일첨부 기능 자체가 어렵다고 느껴지는 시절이 있었음.
그때는 아주 간단한 기능부터 차근차근 구현하다보면 언젠가는 원하는 기능을 구현할 수 있음
일단 결과 먼저
1.결과
파일을 선택해서 첨부하고 첨부한 파일을 미리 볼수 있는 기능을 만들수 있음
2.설명
파일 첨부기능을 브라우져에서 기본적으로 제공하기에 제공하는 기능을 가져다 쓰면 됨.
(1)style
style은 적용을 해도 되고 안해도 되나 적용을 하면 위에 이미지와 같은 형식을 만들수 있음
style은 원하시는 대로 커스텀마이징하여 사용하면 됨
<style> body { margin: 0; padding: 20px; background-color: #f0f0f0; font-family: Arial, sans-serif; } #fileInput { display: block; margin: 0 auto 20px auto; } #gallery-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; background-color: white; padding: 20px; border: 2px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .image-item { width: 400px; height: 600px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } .image-item img { width: 100%; height: 100%; object-fit: fill; } </style>(2)html
골격이라고 말할수 있는 html 소스임
코드상에도 간단히 적어 놨지만 style과 script코드는 위에 코드와 같이 해당위치에 입력을 해서
한페이지에서 style도 보고 script 코드도 한번에 보고싶다 하시면 한페이지에 써도 되나
나중에 실전에서는 코드짤때나 유지 보수 측면에서 보기가 힘들어져 src로 따로 빼는게 좋음.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Gallery</title> <style> 위에있는 스타일을 적용 하거나 src로 따로 빼서 사용하는건 자유 </style> </head> <body> <input type="file" id="fileInput" multiple accept="image/*"> <div id="gallery-container"></div> <script> 스크립트 코드 또한 여기다가 적어도 되지만 src로 따로 뻬서 사용하는건 자유 </script> </body> </html>html에서 input type="file" 로 설정해야 브라우져에서 제공하는 파일첨부 기능을 활용할수 있음.
id="fileInput" 는 추후에 자바스크립트단에서 부르기 위해서 이름을 지어줬다고 생각하믄 쉬움
multiple 은 여러파일을 첨부할수 있는 기능
accept="image/*" 이부분은 파일첨부할때 모든이미지 파일은 허용하나 pdf나 text 파일등은 허용을 안함.
유져로부터 첨부하는 파일을 종류를 골라서 받고 싶으면 사용하면됨. 아니면 빼도됨.
<div id="gallery-container"></div> 이부분이 첨부된 이미지파일이 보이는 부분임.
위와 같이 id는 이름을 지어 줬다고 보믄됨.
(3)javaScript
//파일첨부에서 파일을 첨부하는 이벤트가 일어났다면 아래기능을 실행해죠 document.getElementById('fileInput').addEventListener('change', function(event) { const files = event.target.files; //첨부된 파일을 불러와 변수에 넣어줘 const galleryContainer = document.getElementById('gallery-container'); // id가 gallery-container 불어와 변수에 넣어줘 galleryContainer.innerHTML = ''; // gallery-container 초기화해줘 if (files.length > 0) { // 만약 첨부된 파일이 있다면 for (let i = 0; i < files.length; i++) { //첨부된 파일의 갯수만큼 for문을 돌려줘 const reader = new FileReader(); //파일을 읽을수 있는 객체 불러옴 reader.onload = function(e) { //파일객체가 onload 되면 아래함수 실행해죠 const imageItem = document.createElement('div'); //div태그를 만들고 imageItem.classList.add('image-item'); //만든 div에 image-item 클래스 이름을 붙여줘 const img = document.createElement('img'); //img태그를 만들고 img.src = e.target.result; //만든 img 태그에 src에 첨부한 이미지주소를 넣어줘 imageItem.appendChild(img); //위에 img태그를 div태그 자식태그로 넣어줘 galleryContainer.appendChild(imageItem); //위에 div태그를 위에 변수로 호출한 galleryContainer 안에 자식태그로 넣어줘 }; reader.readAsDataURL(files[i]); //파일첨부한 i번째 파일을 이미지데이터를 읽어와죠 } } });
자바스크립트는 주석으로 설명을 대체함.초보자도 이해 할수 있는 최대한 쉬운 말로 스크립트별로 나름 풀이를 해봤는데,어려울수 있음.
그럴때는 일단 냅다 쳐보다보면 대충 이코드 무슨 명령을 하는 코드 겠구나 이해가됨.
(4)전체코드
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Gallery</title> <style> body { margin: 0; padding: 20px; background-color: #f0f0f0; font-family: Arial, sans-serif; } #fileInput { display: block; margin: 0 auto 20px auto; } #gallery-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; background-color: white; padding: 20px; border: 2px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .image-item { width: 400px; height: 600px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; } .image-item img { width: 100%; height: 100%; object-fit: fill; } </style> </head> <body> <input type="file" id="fileInput" multiple accept="image/*"> <div id="gallery-container"></div> <script> document.getElementById('fileInput').addEventListener('change', function(event) { const files = event.target.files; const galleryContainer = document.getElementById('gallery-container'); galleryContainer.innerHTML = ''; if (files.length > 0) { for (let i = 0; i < files.length; i++) { const reader = new FileReader(); reader.onload = function(e) { const imageItem = document.createElement('div'); imageItem.classList.add('image-item'); const img = document.createElement('img'); img.src = e.target.result; imageItem.appendChild(img); galleryContainer.appendChild(imageItem); }; reader.readAsDataURL(files[i]); } } }); </script> </body> </html>설명 필요 없고 전체 코드가 필요하다는 분은 위에 코드 참고하시길 바람.
그럼 다들 추운날 감기 조심 하시길...
반응형'Study > JavaScript' 카테고리의 다른 글
초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_2 (0) 2024.04.29 초보자를 위한 가짜 목서버 or 임시api 사용법(포스트맨 최신 버젼)_1 (0) 2024.04.25 초보자도 만들 수 있는 자바스크립트로 그림판 만들기(텍스트 추가하기 기능) (0) 2024.03.14 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_2 (0) 2024.03.08 초보자를 위한 자바스크립트를 이용하여 간단하게 얼굴 인식하기( openCV.js 활용)_1 (0) 2024.03.08