• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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쓰기) ★★★★★
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문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012