파일업로드시 미디어 첨부파일 미리보기 정보
파일업로드시 미디어 첨부파일 미리보기
본문
파일업로드시 이미지, 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>
------------------------------
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>
------------------------------
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>
------------------------------
미리보기의 결과물들은 id 가 preview 라는 div 안에 들어갑니다.
그리고 위의 스샷은 css 가 적용되어 있지 않은 상태를 캡쳐한 것이니 css 를 먹이려면 아래처럼 하면 되겠습니다.
<style>
#preview img { 이미지 css; }
#preview audio { 음원 css; }
#preview video { 동영상 css; }
</style>
추천
10
10
댓글 12개
아주 좋은 팁 감사 합니다. 잘 사용 하겠습니다.
@들레아빠
pdf 까지 같이 올리려하다가 안드로이드에서는 역시 예상했던대로 열리지 않아서 나중에 따로 올릴 생각입니다.
동영상도 css 만 잘 만지면 썸네일 크기로 볼 수 있습니다.
@비타주리 pdf도 잘 되네요. 안드로이드 에서도 되고.. 감사 합니다.
@들레아빠
내 폰은 2018년 보급형이라 안드로이드가 아니라 안드로메다네요.ㅜㅠ
수고하셨습니다 : )
감사합니다. 늘 하던 것들인데 혹여나 해서 올려 봤어요
감사합니다 ^^
@민트다이어리 감사합니다.
감사합니다.
@써맨 감사합니다
감사합니다.
@디자이너22 감사합니다
