JavaScript

[js] JS - 첨부파일 텍스트 내용 읽기(=얻기/가져오기/불러오기/출력) (※ 한글깨짐 방지코드 추가)

목차
  1. 업로드 된 텍스트 첨부파일 내용 읽기
  2. 특정 URL 주소의 텍스트 파일 내용 읽기

 

업로드 된 텍스트 첨부파일 내용 읽기 

※ 첨부파일 선택 업로드 방식이며, PHP 코드 및 한글주석까지 읽음.

 

<input type="file" id="myFile">

<hr>

<textarea style="width:500px;height: 400px" id="output"></textarea>


<script>

  var input = document.getElementById("myFile");

  var output = document.getElementById("output");


  input.addEventListener("change", function () {

    if (this.files && this.files[0]) {

      var myFile = this.files[0];


      var reader = new FileReader();


      reader.addEventListener('load', function (e) {

        var text = e.target.result;


        var decoder = new TextDecoder('utf-8');

        var decodedText = decoder.decode(new Uint8Array(text));


        output.textContent = decodedText;

      });


      reader.readAsArrayBuffer(myFile);

    }

  });

</script>


결과보기

Poornachander K (170822) https://stackoverflow.com/a/45815534

 

특정 URL 주소의 텍스트 파일 내용 읽기

※ 특정 URL의 파일 열기 방식이며, PHP코드는 읽기 X

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script>

  $(document).ready(function() {

    // 파일을 읽기 위한 FileReader 객체 생성

    var reader = new FileReader();

    // 파일이 로드될 때 실행되는 이벤트 핸들러

    reader.onload = function(event) {

      var contents = event.target.result;

      // 파일 내용을 사용하여 원하는 작업 수행

      $("#result").text(contents);

    };

    // 파일을 읽어오기 위한 함수

    function readTextFile(file) {

      reader.readAsText(file);

    }

    // 페이지 로딩 시에 실행될 함수

    function onPageLoad() {

      // 웹 서버에 호스팅된 파일의 URL 설정

      var fileURL = "https://sample.com/sample/sample.txt";

      // 파일을 가져오기 위한 XMLHttpRequest 객체 생성

      var xhr = new XMLHttpRequest();

      xhr.open("GET", fileURL, true);

      xhr.responseType = "blob";

      // 파일이 로드될 때 실행되는 이벤트 핸들러

      xhr.onload = function() {

        if (xhr.status === 200) {

          // 파일이 성공적으로 가져와진 경우

          var fileBlob = xhr.response;

          readTextFile(fileBlob);

        }

      };

      // 파일 가져오기 요청 보내기

      xhr.send();

    }

    // 페이지 로딩 시에 onPageLoad 함수 호출

    onPageLoad();

  });

</script>

<div id="result"></div>


둘레아빠 님 (230525) https://sir.kr/qa/500034

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★ document.write() = 다큐먼트라이트
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
1/89
목록
  • 채팅방
  • 필독
1. 채팅창 헤드에서 접속자 확인 2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능 8. 채팅방에 개인정보 입력 금지 9. 채팅방에 광고 욕설 비방 금지
 홈  PC버전 로그인 일본어
웹디자인언어
서버관리언어
고급코딩언어
그누보드
제작의뢰
Q&A
커뮤니티
웹유틸
회원센터
홈짱닷컴 PC버전 로그인