파일업로드시 텍스트 첨부파일 미리보기

그누보드5 팁자료실

파일업로드시 텍스트 첨부파일 미리보기 정보

파일업로드시 텍스트 첨부파일 미리보기

본문

파일업로드시 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>

2040772087_1728264103.6625.png