파일업로드시 미디어 첨부파일 미리보기 > 그누보드5 팁자료실

그누보드5 팁자료실

파일업로드시 미디어 첨부파일 미리보기 정보

파일업로드시 미디어 첨부파일 미리보기

본문

 

파일업로드시 이미지, mp3음원, mp4동영상 이 세가지 경우의 미리보기 기능입니다.

input 의 name 과 action 그리고 submit 설정은 본인의 입맛대로 구성하세요.

 

1. 이미지 - jpg, gif, png

 


<input id="file" type="file" accept=".jpg,.gif,.png"> 
<div id="preview"></div>

<script>
document.querySelector("#file").addEventListener("change", () => {
    reader = new FileReader();
    reader.addEventListener("load", (event) => {
        document.querySelector("#preview").innerHTML = "<img src='" + event.target.result + "'>"; 
    });
    reader.readAsDataURL(document.querySelector("#file").files[0]);
});
</script>

 

3717943588_1727819415.4345.png

 

------------------------------

 

2, 음원 - mp3

 


<input id="file" type="file" accept=".mp3"> 
<div id="preview"></div>

<script>
document.querySelector("#file").addEventListener("change", () => {
    reader = new FileReader();
    reader.addEventListener("load", (event) => {
        document.querySelector("#preview").innerHTML = "<audio src='" + event.target.result + "' autoplay loop controls></audio>"; 
    });
    reader.readAsDataURL(document.querySelector("#file").files[0]);
});
</script>

 

3717943588_1727819539.5703.png

 

------------------------------

 

3. 동영상 - mp4

 


<input id="file" type="file" accept=".mp4"> 
<div id="preview"></div>

<script>
document.querySelector("#file").addEventListener("change", () => {
    reader = new FileReader();
    reader.addEventListener("load", (event) => {
        document.querySelector("#preview").innerHTML = "<video src='" + event.target.result + "' autoplay loop controls></video>"; 
    });
    reader.readAsDataURL(document.querySelector("#file").files[0]);
});
</script>

 

3717943588_1727819634.4516.png

 

------------------------------

 

미리보기의 결과물들은 id 가 preview 라는 div 안에 들어갑니다.

그리고 위의 스샷은 css 가 적용되어 있지 않은 상태를 캡쳐한 것이니 css 를 먹이려면 아래처럼 하면 되겠습니다.

 


<style>
#preview img { 이미지 css; }
#preview audio { 음원 css; }
#preview video { 동영상 css; }
</style>
추천
10

댓글 9개

@들레아빠 

pdf 까지 같이 올리려하다가 안드로이드에서는 역시 예상했던대로 열리지 않아서 나중에 따로 올릴 생각입니다.

동영상도 css 만 잘 만지면 썸네일 크기로 볼 수 있습니다.

전체 2,516 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT