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

[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)

분류 제목
js JS - list 속성 - INPUT 텍스트 필드에 입력 가능한 datalis(데이터리스트)t에 대한 참조 …
js JS - maxLength 속성 ★ - INPUT 입력 가능 최대 글자수 설정/반환 (= maxLength속…
js JS - name 속성 - INPUT 텍스트 필드의 네임 설정/반환 (= name속성 = 네임속성) ※ 인풋…
js JS - pattern 속성 - INPUT 텍스트 정규식패턴 설정/반환 (= pattern속성 = 패턴속성)…
js JS - placeholder 속성 - INPUT 텍스트 플레이스홀더 설정/반환 (= placeholder속…
js JS - readOnly 속성 - INPUT 텍스트 읽기전용 설정/반환 (= readOnly속성 = 리드온리…
js JS - required 속성 - INPUT 텍스트 필수입력 여부 설정/반환 (= required속성 = 리…
js JS - size 속성 - INPUT 텍스트 size 속성 설정/반환 (= size속성 = 사이즈속성) ※ …
js JS - type 속성 - INPUT 텍스트 타입 반환 (= type속성 = 타입속성)
js JS - value 속성 ★ - INPUT 텍스트 필드의 value 속성값 설정/반환 (= value속성 =…
js JS - 스크롤 시, 로고이미지 변경 (Scroll logo image change)
js JS - 각 숫자번호 클릭 시, 해당 번호 얼럿창(팝업)으로 띄우기
js JS - 특정 클래스 갖는 자식요소의 부모요소에 사용자 지정 클래스 추가
js JS - 이전페이지로 이동 시 기존 스크롤위치로 이동 (JavaScript vs. jQuery 코드 비교)
js JS - 첨부파일 텍스트 내용 읽기(=얻기/가져오기/불러오기/출력) (※ 한글깨짐 방지코드 추가)
js JS - 숫자를 한글로 읽기/변환
js JS - 숫자 천자리 표시 기호 쉼표(콤마) 제거 함수 (= getInt함수 = 겟인트함수)
js JS - 랜덤이미지 (= 랜덤배너)
js JS - 텍스트 첫글자만 글자색 변경 (= 맨앞글자 색상 변경)
js JS - 자바스크립트 성능 향상 위한 코드 작성법 (= JavaScript Performance)
3/4
목록
찾아주셔서 감사합니다. Since 2012