다양한 브라우저에서 javascript로 클라이언트 측 파일 내용 읽기

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

Firefox 및 Internet Explorer에서 작동하는 솔루션이 있습니다. 예쁘지는 않지만 지금은 시도하고 있습니다.

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텍스트 영역에 씁니다 .

다른 브라우저에서이 작업을 수행하는 방법이 있습니까?

나는 현재 Safari와 Chrome에 가장 관심이 많지만 다른 브라우저에 대한 제안에 열려 있습니다.

편집 : "왜 이렇게 하시겠습니까?"라는 질문에 대한 응답 :

기본적으로 클라이언트 측에서 일회성 암호와 함께 파일 내용을 해시하여이 정보를 확인으로 다시 보낼 수 있습니다.

파일 API에 대한 정보를 추가하도록 편집 됨

이 답변을 처음 작성했기 때문에 File API 는 표준으로 제안 되었으며 대부분의 브라우저에서 구현되었습니다 ( FileReader아직 API는 아니지만 여기에 설명 된 API에 대한 지원을 추가 한 IE 10 File기준). API는 파일의 비동기 읽기, 바이너리 파일에 대한 더 나은 지원 및 다른 텍스트 인코딩의 디코딩을 지원하도록 설계 되었기 때문에 이전 Mozilla API보다 약간 더 복잡합니다. 이 일부 모질라 개발자 네트워크에서 사용할 문서를 온라인뿐만 아니라 다양한 예. 다음과 같이 사용합니다.

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)에서는이를 수행하는 방법이없는 것 같습니다. File 객체에 있는 유일한 키 는 fileName및 fileSize입니다. File 및 FileList 지원에 대한 커밋 메시지 에 따르면 Mozilla의 File 객체 에서 영감을 얻었 지만 기능의 하위 집합 만 지원하는 것으로 보입니다.

이를 변경하려면 항상 WebKit 프로젝트에 패치 를 보낼 수 있습니다. 또 다른 가능성은 HTML 5 에 포함될 Mozilla API를 제안하는 것입니다 . WHATWG의 메일 링리스트는 아마 그렇게 할 수있는 가장 좋은 장소입니다. 그렇게한다면 적어도 몇 년 안에이를 수행 할 수있는 브라우저 간 방법이있을 가능성이 훨씬 더 높습니다. 물론 패치 나 HTML 5 포함을위한 제안을 제출하는 것은 아이디어를 옹호하는 작업을 의미하지만, Firefox가 이미이를 구현하고 있다는 사실은 시작할 수있는 무언가를 제공합니다.

사용자가 선택한 파일을 읽기 위해서는 파일 열기 대화 상자를 사용하여 <input type="file">태그를 사용할 수 있습니다 . 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>

즐거운 코딩 되세요!
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;
  }
 }