파일업로드시 txt파일, css파일, js파일과 메모장으로 열람하는 html파일 이 네가지 경우의 미리보기 기능입니다.
약간의 css 를 첨가하였습니다. 가로 세로 비율은 16:9로 주었습니다.
미리보기의 결과물들은 id 가 preview 라는 div 안에 들어갑니다.
input 의 name 과 action 그리고 submit 설정은 본인의 입맛대로 구성하세요.
1. 미리보기 코드
[code]
<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>
[/code]

--------------------
2. 한글이 깨져서 나온다면 첨부파일의 문자인코딩을 utf-8 로 설정하시기 바랍니다.
댓글 8개
게시글 목록
| 번호 | 제목 |
|---|---|
| 22569 | |
| 22566 | |
| 22565 | |
| 22559 | |
| 22530 | |
| 22527 | |
| 22525 | |
| 22521 | |
| 22518 | |
| 22506 | |
| 22500 | |
| 22490 | |
| 22487 | |
| 22481 | |
| 22480 | |
| 22473 | |
| 22471 | |
| 22468 | |
| 22453 | |
| 22449 | |
| 22440 | |
| 22436 | |
| 22435 | |
| 22415 | |
| 22407 | |
| 22404 | |
| 22376 | |
| 22364 | |
| 22362 | |
| 22353 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기