[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