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

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

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

1. 이미지 - jpg, gif, png

[code]

<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>

[/code]

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

2, 음원 - mp3

[code]

<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>

[/code]

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

3. 동영상 - mp4

[code]

<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>

[/code]

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

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

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

[code]

<style>

#preview img { 이미지 css; }

#preview audio { 음원 css; }

#preview video { 동영상 css; }

</style>

[/code]