파일업로드시 텍스트 첨부파일 미리보기 정보
파일업로드시 텍스트 첨부파일 미리보기
본문
파일업로드시 txt파일, css파일, js파일과 메모장으로 열람하는 html파일 이 네가지 경우의 미리보기 기능입니다.
약간의 css 를 첨가하였습니다. 가로 세로 비율은 16:9로 주었습니다.
미리보기의 결과물들은 id 가 preview 라는 div 안에 들어갑니다.
input 의 name 과 action 그리고 submit 설정은 본인의 입맛대로 구성하세요.
1. 미리보기 코드
<style>
#preview textarea { width:100%; aspect-ratio:16/9; resize:none; outline:none; padding:15px; border:1px solid #cccccc; box-sizing:border-box; }
</style>
<input id="file" type="file" accept=".txt,.css,.js,.html">
<div id="preview"></div>
<script>
document.querySelector("#file").addEventListener("change", () => {
reader = new FileReader();
reader.addEventListener("load", (event) => {
document.querySelector("#preview").innerHTML = "<textarea>" + event.target.result + "</textarea>";
});
reader.readAsText(document.querySelector("#file").files[0]);
});
</script>
--------------------
2. 한글이 깨져서 나온다면 첨부파일의 문자인코딩을 utf-8 로 설정하시기 바랍니다.
추천
7
7
댓글 8개
감사합니다.
@써맨 감사합니다
감사합니다
@너나잘해 감사합니다.
오우 감사합니다.
@DawnDew
감사합니다.
감사 합니다.
@들레아빠 감사합니다
