다양한 브라우저에서 자바스크립트로 클라이언트측 파일 내용 읽기

다양한 브라우저에서 자바스크립트로 클라이언트측 파일 내용 읽기

브라우저를 통해 클라이언트 머신의 파일 내용을 읽을 수 있는 스크립트 전용 솔루션을 제공하려고 합니다.

파이어폭스와 인터넷 익스플로러에서 작동하는 솔루션이 있습니다.예쁘지는 않지만 지금은 시도만 하고 있습니다.

function getFileContents() {
    var fileForUpload = document.forms[0].fileForUpload;
    var fileName = fileForUpload.value;

    if (fileForUpload.files) {
        var fileContents = fileForUpload.files.item(0).getAsBinary();
        document.forms[0].fileContents.innerHTML = fileContents;
    } else {
        // try the IE method
        var fileContents = ieReadFile(fileName);
        document.forms[0].fileContents.innerHTML = fileContents;
    }
}       

function ieReadFile(filename) 
{
    try
    {
        var fso  = new ActiveXObject("Scripting.FileSystemObject"); 
        var fh = fso.OpenTextFile(filename, 1); 
        var contents = fh.ReadAll(); 
        fh.Close();
        return contents;
    }
    catch (Exception)
    {
        return "Cannot open file :(";
    }
}

전화할수있습니다getFileContents()입니다.fileContents텍스트 영역

이것을 다른 브라우저에서 할 수 있는 방법이 있습니까?

저는 현재 사파리와 크롬에 가장 관심이 많지만, 다른 브라우저에 대한 제안을 받아들일 용의가 있습니다.

편집: "왜 이렇게 하고 싶으십니까?"라는 질문에 답합니다.":

기본적으로, 저는 이 정보를 검증하기 위해 클라이언트 측의 일회용 비밀번호와 함께 파일 내용을 해시하고 싶습니다.

File API에 대한 정보를 추가하기 위해 편집됨

제가 원래 이 답변을 작성한 이후로, 파일 API는 표준으로 제안되어 대부분의 브라우저에서 구현되었습니다(IE 10 기준).FileReader, 아직된 만은 FileAPI). API는 파일의 비동기 읽기, 바이너리 파일에 대한 더 나은 지원, 다양한 텍스트 인코딩의 디코딩을 지원하기 위해 설계되었기 때문에 이전의 모질라 API보다 조금 더 복잡합니다.Mozilla Developer Network에서 사용할 수 있는 문서와 온라인에서 사용할 수 있는 다양한 예제가 있습니다.다음과 같이 사용할 수 있습니다.

var file = document.getElementById("fileForUpload").files[0];
if (file) {
    var reader = new FileReader();
    reader.readAsText(file, "UTF-8");
    reader.onload = function (evt) {
        document.getElementById("fileContents").innerHTML = evt.target.result;
    }
    reader.onerror = function (evt) {
        document.getElementById("fileContents").innerHTML = "error reading file";
    }
}

원답

WebKit(따라서 Safari 및 Chrome)에서는 이를 수행할 방법이 없는 것 같습니다.파일 개체에 있는 유일한 키는 다음과 같습니다.fileName그리고.fileSize. 파일 및 파일 목록 지원에 대한 커밋 메시지에 따르면 이러한 메시지는 Mozilla의 파일 개체에서 영감을 얻었지만 일부 기능만 지원하는 것으로 보입니다.

이를 변경하려면 언제든지 WebKit 프로젝트에 패치를 보낼 수 있습니다.또 다른 가능성은 HTML 5에 포함하기 위해 Mozilla API를 제안하는 것입니다. WHATWG 메일링 목록이 아마도 가장 적합한 장소일 것입니다.그렇게 한다면 적어도 몇 년 안에 크로스 브라우저 방식이 존재할 가능성이 훨씬 더 높아집니다.물론 HTML 5에 패치나 포함 제안서를 제출하는 것은 아이디어를 방어하기 위한 작업을 의미하지만 파이어폭스가 이미 이를 구현하고 있다는 사실은 시작부터 알 수 있습니다.

사용자가 선택한 파일을 읽으려면 파일 열기 대화상자를 사용하여<input type="file">tag. MSDN에서 정보를 찾을 수 있으며, 파일을 선택하면 FileReader API를 이용하여 내용을 읽을 수 있습니다.

function onFileLoad(elementId, event) {
    document.getElementById(elementId).innerText = event.target.result;
}

function onChooseFile(event, onLoadFileHandler) {
    if (typeof window.FileReader !== 'function')
        throw ("The file API isn't supported on this browser.");
    let input = event.target;
    if (!input)
        throw ("The browser does not properly implement the event object");
    if (!input.files)
        throw ("This browser does not support the `files` property of the file input.");
    if (!input.files[0])
        return undefined;
    let file = input.files[0];
    let fr = new FileReader();
    fr.onload = onLoadFileHandler;
    fr.readAsText(file);
}

<input type='file' onchange='onChooseFile(event, onFileLoad.bind(this, "contents"))' />
<p id="contents"></p>

현대 원주민을 위한 대안이 있습니다.파일은 Blob을 구현하므로 Blob.text()를 호출할 수 있습니다.

async function readText(event) {
  const file = event.target.files.item(0)
  const text = await file.text();
  
  document.getElementById("output").innerText = text
}

<input type="file" onchange="readText(event)" />
<pre id="output"></pre>

현재(2020년 9월) Chrome과 Firefox에서 지원되며, 다른 Browser의 경우 blob-polyfill과 같은 폴리필을 로드해야 합니다.

해피코딩!
Internet Explorer에서 오류가 발생하면 ActiveX를 허용하도록 보안 설정 변경

var CallBackFunction = function(content) {
  alert(content);
}
ReadFileAllBrowsers(document.getElementById("file_upload"), CallBackFunction);
//Tested in Mozilla Firefox browser, Chrome
function ReadFileAllBrowsers(FileElement, CallBackFunction) {
  try {
    var file = FileElement.files[0];
    var contents_ = "";

    if (file) {
      var reader = new FileReader();
      reader.readAsText(file, "UTF-8");
      reader.onload = function(evt) {
        CallBackFunction(evt.target.result);
      }
      reader.onerror = function(evt) {
        alert("Error reading file");
      }
    }
  } catch (Exception) {
    var fall_back = ieReadFile(FileElement.value);
    if (fall_back != false) {
      CallBackFunction(fall_back);
    }
  }
}
///Reading files with Internet Explorer
function ieReadFile(filename) {
  try {
    var fso = new ActiveXObject("Scripting.FileSystemObject");
    var fh = fso.OpenTextFile(filename, 1);
    var contents = fh.ReadAll();
    fh.Close();
    return contents;
  } catch (Exception) {
    alert(Exception);
    return false;
  }
}

이 제품은 잘 작동합니다.

function onClick(event) {
    filecontent = "";
    var myFile = event.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      filecontent = e.target.result;

    });
    reader.readAsBinaryString(myFile);
  }

언급URL : https://stackoverflow.com/questions/750032/reading-file-contents-on-the-client-side-in-javascript-in-various-browsers