로컬 텍스트 파일을 읽는 방법?

371

파일의 경로를 가져 와서 각 텍스트 줄을 char 배열로 변환하는 함수를 만들어 간단한 텍스트 파일 판독기를 작성하려고하지만 작동하지 않습니다.

function readTextFile() {
  var rawFile = new XMLHttpRequest();
  rawFile.open("GET", "testing.txt", true);
  rawFile.onreadystatechange = function() {
    if (rawFile.readyState === 4) {
      var allText = rawFile.responseText;
      document.getElementById("textSection").innerHTML = allText;
    }
  }
  rawFile.send();
}

여기서 무엇이 잘못 되었나요?

이전 개정판 에서 코드를 약간 변경 한 후에도 여전히 작동하지 않는 것 같으므로 이제 XMLHttpRequest예외 101 이 발생합니다.

Firefox에서 이것을 테스트했지만 작동하지만 Google Chrome에서는 작동하지 않고 예외 101이 계속 발생합니다. Firefox뿐만 아니라 다른 브라우저 (특히 Chrome)에서도 작동하도록하려면 어떻게해야합니까? )?

javascript  file-io  xmlhttprequest 
— 대니
소스
구체적으로 일어나는 일. 배열에 아무것도 없습니까? 아니면 그냥 "틀린"것들 ..?
— PinkElephantsOnParade
로컬 컴퓨터에서 테스트하고 있습니까? 뿐만 아니라 status의 테스트를 수행하십시오 . 0200
— Jeffrey Sweeney
1
@JeffreySweeney 예 로컬 컴퓨터에서 이것을 테스트하고 있습니다. 나는 자바 스크립트와 같은 장소에서 텍스트 파일을 저장 및 HTML 한
— 대니

답변:

311

상태 0을 확인해야합니다 (로 파일을 로컬로로드 할 때와 XMLHttpRequest같이 상태가 반환되지 않음 Webserver)

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

그리고 file://파일 이름을 지정 하십시오.

readTextFile("file:///C:/your/path/to/file.txt");
— 마지드 라이시
소스
2
실제로 Mac 에서이 작업을하고 있으므로 여전히 file : //을 지정하고 있습니까?
— Danny
11
file:///User/Danny/Desktop/javascriptWork/testing.txt브라우저의 url bar 에 넣고 파일을 볼 수 있는지 확인하십시오.
— Majid Laissi
21
절대 경로 일 필요는 없습니다. 이것은 나를 위해 잘 작동했습니다. readTextFile ( 'Properties / version.txt'); 감사!
— 소닉 소울
2
웹 서버에서 읽고 있으므로 async를로 설정해야 true합니다. 이것이 간단한 local검색 인 경우 async to로 설정해 false도 괜찮지 만 onreadystatechangefalse로 설정된 동안에는 필요하지 않습니다. 문서는 다음과 같습니다. w3schools.com/ajax/ajax_xmlhttprequest_send.asp
— rambossa
149
Chrome (다른 브라우저에서도 가능)에서는 작동하지 않습니다. "Cross origin 요청은 프로토콜 체계 (http, data, chrome, chrome-extension, https, chrome-extension-resource)에서만 지원됩니다."
— Rick Burgess
102

자바 스크립트를 방문하십시오 ! readAsText 섹션으로 이동하여 예제를 시도하십시오. FileReader 의 readAsText 함수 작동 방식을 알 수 있습니다 .

    <html>
    <head>
    <script>
      var openFile = function(event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function(){
          var text = reader.result;
          var node = document.getElementById('output');
          node.innerText = text;
          console.log(reader.result.substring(0, 200));
        };
        reader.readAsText(input.files[0]);
      };
    </script>
    </head>
    <body>
    <input type='file' accept='text/plain' onchange='openFile(event)'><br>
    <div id='output'>
    ...
    </div>
    </body>
    </html>
— 아 미트 차 우라 시아
소스
14
링크는 훌륭하지만 "대상 사이트에 도달 할 수 없거나 영구적으로 오프라인 상태가되는 경우 항상 중요한 링크의 가장 관련성있는 부분을 인용해야합니다." 좋은 답변을 작성하려면 어떻게합니까?를 참조하십시오 .
— 4ae1e1
16
이 예제는 사용자 입력 텍스트 파일을 다루지 만 질문은 서버의 로컬 파일에 관한 것입니다.
— S. Kirby
@ S.Kirby OP가 로컬 또는 원격 서버에서 실행되는지에 대한 질문에 대한 답변으로 OP에서 말했듯 이 모두 로컬입니다. 하나의 폴더에 다른 것은 없습니다. . 게다가, 다른 사람들 (나 같은 사람들)은 그것을 어떻게 하는가에 대한 의문이있을 수 있습니다.
— Simon Forsberg
102

자바 스크립트 에 fetch api 를 도입 한 후에는 파일 내용을 읽는 것이 더 간단 할 수 없습니다.

텍스트 파일을 읽는 중

fetch('file.txt')
  .then(response => response.text())
  .then(text => console.log(text))
  // outputs the content of the text file

JSON 파일 읽기

fetch('file.json')
  .then(response => response.json())
  .then(jsonResponse => console.log(jsonResponse))     
   // outputs a javascript object from the parsed json

30/07/2018 업데이트 (면책 조항) :

이 기술은 Firefox 에서는 잘 작동 하지만 Chrome 의 fetch구현은 file:///이 업데이트를 작성한 날짜 (Chrome 68에서 테스트)에 URL 체계를 지원하지 않는 것 같습니다 .

업데이트 -2 (면책 조항) :

이 기술은 Chrome과 동일한 (보안) 이유로 Firefox 버전 68 (2019 년 7 월 9 일) 이상 에서는 작동하지 않습니다 CORS request not HTTP. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp를 참조 하십시오 .

— 압델 라지 즈 모크 나체
소스
4
훌륭한! 가져 오기 표준 인용 : "URL 스킴, 리디렉션, 교차 출처 시맨틱, CSP, 서비스 워커, 혼합 컨텐츠 Referer"의 일관된 처리를 제공합니다 . 나는 이것이 좋은 ol'FileReaders와 HttpRequests에 작별 인사를 의미한다고 생각합니다 (그리고 나는 조금 놓치지 않을 것입니다)
— Armfoot
1
그러나 텍스트를 어떻게 사용하고 다른 곳에서 사용하기 위해 문자열 변수에 넣을 수 있습니까? (내가 무엇을하든 '정의되지 않음'을 계속 받고 있습니다.)
— not2qubit
2
@ not2qubit 텍스트 파일을 가져 오는 것은 비동기 작업입니다. 파일을 완전히 읽기 전에 변수를 사용하고 있기 때문에 정의되지 않습니다. promise 콜백 내에서 사용하거나 javascript "async await"연산자와 같은 것을 사용해야합니다.
— Abdelaziz Mokhnache
13
Fetch API cannot load file:///C:/Users/path/to/file/file.txt. URL scheme must be "http" or "https" for CORS request.
— Jacob Schneider
1
— Sam Murphy
39 

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) {
      output.textContent = e.target.result;
    });
    
    reader.readAsBinaryString(myFile);
  }   
});
<input type="file" id="myFile">
<hr>
<textarea style="width:500px;height: 400px" id="output"></textarea>
스 니펫 확장

— Poornachander K
소스
9
이것이이 4 살짜리 질문에 대답하는지 확실하지 않습니다. OP가 문서를 업로드하지 않고 경로에서 같은 디렉토리에있는 텍스트 파일을 읽으려고합니다. 그리고이 질문에 적어도이 질문에 대한 답을하고자한다면, 다른 사람보다 왜 당신의 답이 더 나은 것으로 생각하는지 또는 새로운 답을 보증하기 위해 질문 이후 언어가 어떻게 변했는지에 대한 간단한 요약을 작성하십시오.
— Matthew Ciaramitaro
1
내 자신의 기존 파일 업로드 입력 HTML을 사용 -의 라인을 복사 var reader = new FileReader();를 통해 reader.readAsBinaryString(..)내 텍스트 파일의 내용을 읽습니다 -. 깨끗하고 우아하며 매력처럼 작동합니다. 이 글에서 가장 좋은 답변-고마워요!
— Gene Bo
18

존 페리맨,

예. js는 로컬 파일 (FileReader () 참조)을 읽을 수 있지만 자동으로 읽을 수는 없습니다. 사용자는 파일 또는 파일 목록을 html을 사용하여 스크립트에 전달해야합니다 <input type=file>.

그런 다음 js를 사용하면 파일 또는 파일 목록, 해당 속성 및 파일 내용을 처리 (예제보기) 할 수 있습니다.

보안상의 이유로 js가 할 수없는 일은 컴퓨터의 파일 시스템에 자동으로 (사용자 입력없이) 액세스하는 것입니다.

js가 로컬 fs에 자동으로 액세스하려면 js가 포함 된 html 파일이 아니라 hta 문서를 작성하는 데 자동으로 필요합니다.

hta 파일은 그 안에 js 또는 vbs를 포함 할 수 있습니다.

그러나 hta 실행 파일은 Windows 시스템에서만 작동합니다.

이것은 표준 브라우저 동작입니다.

또한 구글 크롬은 fs api에서 더 많은 정보를 얻었습니다 : http://www.html5rocks.com/en/tutorials/file/filesystem/

— 참새
소스
이것은 내가 찾고있는 의견입니다. 누구나 파일의 사용자 입력을위한 코드를 입력 태그로 입력하지만 문제는 사용자가 코드에서 언급 한 경로에서 파일을 자동으로 가져 오는 것입니다. 감사!
— Kumar Kartikeya
13

아마 당신은 이미 그것을 시도, 다음과 같이 "false"를 입력 :

 rawFile.open("GET", file, false);
— 모멘
소스
12

두 가지 함수를 만들어보십시오.

function getData(){       //this will read file and send information to other function
       var xmlhttp;

       if (window.XMLHttpRequest) {
           xmlhttp = new XMLHttpRequest();               
       }           
       else {               
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");               
       }

       xmlhttp.onreadystatechange = function () {               
           if (xmlhttp.readyState == 4) {                   
             var lines = xmlhttp.responseText;    //*here we get all lines from text file*

             intoArray(lines);     *//here we call function with parameter "lines*"                   
           }               
       }

       xmlhttp.open("GET", "motsim1.txt", true);
       xmlhttp.send();    
}

function intoArray (lines) {
   // splitting all text data into array "\n" is splitting data from each new line
   //and saving each new line as each element*

   var lineArr = lines.split('\n'); 

   //just to check if it works output lineArr[index] as below
   document.write(lineArr[2]);         
   document.write(lineArr[3]);
}
— 모심 만수 어
소스
브라우저가이 작업을 수행하는 방식 (6 명이 시도한 것 같습니다 :-))
— Xan-Kun Clark-Davis
11

다른 예-FileReader 클래스가있는 독자

<html>
    <head>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
    </head>
    <body>
        <script>
            function PreviewText() {
            var oFReader = new FileReader();
            oFReader.readAsDataURL(document.getElementById("uploadText").files[0]);
            oFReader.onload = function (oFREvent) {
                document.getElementById("uploadTextValue").value = oFREvent.target.result; 
                document.getElementById("obj").data = oFREvent.target.result;
            };
        };
        jQuery(document).ready(function(){
            $('#viewSource').click(function ()
            {
                var text = $('#uploadTextValue').val();
                alert(text);
                //here ajax
            });
        });
        </script>
        <object width="100%" height="400" data="" id="obj"></object>
        <div>
            <input type="hidden" id="uploadTextValue" name="uploadTextValue" value="" />
            <input id="uploadText" style="width:120px" type="file" size="10"  onchange="PreviewText();" />
        </div>
        <a href="#" id="viewSource">Source file</a>
    </body>
</html>
— 웹 스키
소스
2
파일 반환 base64 출력
— VP
6

사용 가져 오기 및 비동기 기능

const logFileText = async file => {
    const response = await fetch(file)
    const text = await response.text()
    console.log(text)
}

logFileText('file.txt')
— barro32
소스
7
'CORS 요청의 경우 URL 체계가 "http"또는 "https"여야합니다.'
— Qwerty 2016 년
고마워, 나를 위해 일해!
— oscarAguayo
5

도움이 될 수 있습니다. 

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            alert(xmlhttp.responseText);
        }
    }

    xmlhttp.open("GET", "sample.txt", true);
    xmlhttp.send();
— 사 메라 R.
소스
5

현대적인 솔루션 :

<input type="file" onchange="this.files[0].text().then(t => console.log(t))">

사용자가 해당 입력을 통해 텍스트 파일을 업로드하면 콘솔에 기록됩니다. 다음은 작동하는 jsbin 데모 입니다.

보다 자세한 버전은 다음과 같습니다.

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await file.text();
    console.log(text);
  }
</script>

현재 (2020 년 1 월) 이것은 Chrome 및 Firefox에서만 작동합니다. 나중에 읽을 경우 호환성을 확인하십시오. https://developer.mozilla.org/en-US/docs/Web/API/Blob/text

구형 브라우저에서는 다음과 같이 작동합니다.

<input type="file" onchange="loadFile(this.files[0])">
<script>
  async function loadFile(file) {
    let text = await (new Response(file)).text();
    console.log(text);
  }
</script>
— 조
소스
2

위의 답변에 추가 하여이 수정 된 솔루션이 저에게 효과적이었습니다.

<input id="file-upload-input" type="file" class="form-control" accept="*" />

....

let fileInput  = document.getElementById('file-upload-input');
let files = fileInput.files;

//Use createObjectURL, this should address any CORS issues.
let filePath = URL.createObjectURL(files[0]);

....

function readTextFile(filePath){
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", filePath , true);
    rawFile.send(null);

    rawFile.onreadystatechange = function (){
        if(rawFile.readyState === 4){
            if(rawFile.status === 200 || rawFile.status == 0){
                var allText = rawFile.responseText;
                console.log(allText);
            }
        }
    }     
}
— Fabii
소스
2 
function readTextFile(file) {
    var rawFile = new XMLHttpRequest(); // XMLHttpRequest (often abbreviated as XHR) is a browser object accessible in JavaScript that provides data in XML, JSON, but also HTML format, or even a simple text using HTTP requests.
    rawFile.open("GET", file, false); // open with method GET the file with the link file ,  false (synchronous)
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4) // readyState = 4: request finished and response is ready
        {
            if(rawFile.status === 200) // status 200: "OK"
            {
                var allText = rawFile.responseText; //  Returns the response data as a string
                console.log(allText); // display text on the console
            }
        }
    }
    rawFile.send(null); //Sends the request to the server Used for GET requests with param null
}

readTextFile("text.txt"); //<= Call function ===== don't need "file:///..." just the path

-javascript에서 파일 텍스트 읽기 -javascript를
사용하여 파일에서 콘솔 로그 텍스트 읽기
-

내 경우에는 Google 크롬 및 mozilla firefox 파일의 구조가 다음과 같습니다.여기에 이미지 설명을 입력하십시오

console.log 결과 :
여기에 이미지 설명을 입력하십시오

— 나 디르 하미 두
소스
다음은 오류를 표시 합니다. 원본 'null'에서 'file : /// C : / {myLocalPath} PropertiesFile.txt'의 XMLHttpRequest에 대한 액세스가 CORS 정책에 의해 차단되었습니다. 교차 원본 요청은 프로토콜 체계에 대해서만 지원됩니다. http, 데이터, 크롬, 크롬 확장, https.
— Kumar Kartikeya
1 
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
                $.ajax({`enter code here`
                    url: "TextFile.txt",
                    dataType: "text",
                    success: function (data) {                 
                            var text = $('#newCheckText').val();
                            var str = data;
                            var str_array = str.split('\n');
                            for (var i = 0; i < str_array.length; i++) {
                                // Trim the excess whitespace.
                                str_array[i] = str_array[i].replace(/^\s*/, "").replace(/\s*$/, "");
                                // Add additional code here, such as:
                                alert(str_array[i]);
                                $('#checkboxes').append('<input type="checkbox"  class="checkBoxClass" /> ' + str_array[i] + '<br />');
                            }
                    }                   
                });
                $("#ckbCheckAll").click(function () {
                    $(".checkBoxClass").prop('checked', $(this).prop('checked'));
                });
        });
    </script>
</head>
<body>
    <div id="checkboxes">
        <input type="checkbox" id="ckbCheckAll" class="checkBoxClass"/> Select All<br />        
    </div>
</body>
</html>
— 아디 치아
소스
1

js (data.js)로드에서 로컬 파일 데이터를 가져옵니다.

function loadMyFile(){
    console.log("ut:"+unixTimeSec());
    loadScript("data.js?"+unixTimeSec(), loadParse);
}
function loadParse(){
    var mA_=mSdata.split("\n");
    console.log(mA_.length);
}
function loadScript(url, callback){

    var script = document.createElement("script")
    script.type = "text/javascript";

    if (script.readyState){  //IE
        script.onreadystatechange = function(){
            if (script.readyState == "loaded" ||
                    script.readyState == "complete"){
                script.onreadystatechange = null;
                callback();
            }
        };
    } else {  //Others
        script.onload = function(){
            callback();
        };
    }

    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*![^\r\n]*[\r\n]*/, "").
      replace(/[\r\n][^\r\n]*\*\/[^\/]+$/, "");
}
function unixTimeSec(){
    return Math.round( (new Date()).getTime()/1000);
}

data.js 파일은 다음과 같습니다.

var mSdata = hereDoc(function() {/*!
17,399
1237,399
BLAHBLAH
BLAHBLAH
155,82
194,376
*/});

동적 unixTime queryString은 캐시되지 않습니다.

AJ는 웹 http : //에서 작동합니다.

— 로 베가
소스
여러 줄 문자열에 ES6 템플릿 리터럴 구문을 사용하지 않는 이유는 무엇입니까? ( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… 참조 )
— Sapphire_Brick
1

동일 출처 정책으로 인해 Chrome의 로컬 AJAX 호출은 지원되지 않습니다.

크롬의 오류 메시지는 다음과 같습니다. "프로토콜 체계에는 교차 출처 요청이 지원되지 않습니다 : http, 데이터, 크롬, 크롬 확장명, https."

즉, 크롬은 http / https 프로토콜을 사용하여 도메인이 제공하는 파일을 유지하기 위해 모든 도메인에 대해 가상 디스크를 만듭니다. 이 가상 디스크 외부의 파일에 대한 모든 액세스는 동일한 원본 정책에 따라 제한됩니다. AJAX 요청 및 응답은 http / https에서 발생하므로 로컬 파일에는 작동하지 않습니다.

Firefox는 그러한 제한을 두지 않으므로 코드는 Firefox에서 즐겁게 작동합니다. 그러나 크롬에 대한 해결 방법도 있습니다 . 여기를 참조하십시오 .

— Sushant T
소스
0

내 라이브러리를 가져올 수 있습니다 : 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js?pe=yikuansun2015@gmail.com"></script>
스 니펫 확장

그러면 함수 fetchfile(path)는 업로드 된 파일을 반환합니다 

<script src="https://www.editeyusercontent.com/preview/1c_hhRGD3bhwOtWwfBD8QofW9rD3T1kbe/code.js"></script>
<script>console.log(fetchfile("file.txt"))</script>
스 니펫 확장

참고 : Chrome에서 HTML 코드가 로컬 인 경우 오류가 표시되지만 HTML 코드와 파일을 온라인으로 저장 한 다음 온라인 HTML 파일을 실행하면 작동합니다.

0

JavaScript크롬 을 사용하여 로컬 파일 텍스트를 읽으 려면 크롬 브라우저가 인수와 함께 실행되어 --allow-file-access-from-filesJavaScript가 로컬 파일에 액세스하도록 허용 한 후 XmlHttpRequest다음과 같이 읽을 수 있습니다 .

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function () {
   if (xmlhttp.readyState == 4) {
       var allText = xmlhttp.responseText;          
            }
        };
xmlhttp.open("GET", file, false);
xmlhttp.send(null);
— 알리에 자트 오데
소스
0

로컬 파일을 읽는 방법?

이것을 사용하면 loadText ()로 파일을로드 한 다음 JS는 파일을 읽고로드 할 때까지 비동기 적으로 기다린 다음 readText () 함수를 실행하여 정상적인 JS 논리를 계속할 수 있습니다 (시도 캐치를 작성할 수도 있습니다) 오류가 발생하는 경우 loadText () 함수를 차단하십시오.)하지만이 예제에서는 최소한으로 유지합니다.

async function loadText(url) {
    text = await fetch(url);
    //awaits for text.text() prop 
    //and then sends it to readText()
    readText(await text.text());
}

function readText(text){
    //here you can continue with your JS normal logic
    console.log(text);
}

loadText('test.txt');
— D. 스냅
소스
기능성 염에 걸린
— Sapphire_Brick
0

나는이 파티에 늦었다는 것을 안다. 내가 가진 것을 보여 드리겠습니다.

이것은 텍스트 파일 의 간단한 읽기입니다

var path = C:\\established-titles\\orders\\shopify-orders.txt
var fs = require('fs')
fs.readFile(path , 'utf8', function(err, data) {
  if (err) throw err;
  console.log('OK: ' + filename);
  console.log(data)
});

이게 도움이 되길 바란다.

— 알존 야마로
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.