[javascript] JavaScript를 통한 로컬 파일 액세스

앞에서 언급 한 것처럼 FileWriter API 와 함께 FileSystem 및 File API를 사용하여 브라우저 탭 / 창의 컨텍스트에서 클라이언트 시스템으로 파일을 읽고 쓸 수 있습니다.

FileSystem 및 FileWriter API와 관련하여 몇 가지 알아야 할 사항이 있지만 그중 일부는 언급되었지만 반복 할 가치가 있습니다.

• API 구현은 현재 Chromium 기반 브라우저 (Chrome & Opera)에만 존재합니다.
• 두 API 모두 2014 년 4 월 24 일 W3C 표준 트랙에서 제거되었으며 현재는 독점적입니다.
• 향후 브라우저 구현에서 (현재 독점적 인) API를 제거 할 가능성이 있습니다
• 샌드 박스 (파일이 더 효과를 얻을 수있는 디스크의 외부에 위치)은 API를 사용하여 생성 된 파일을 저장하는 데 사용
• 가상 파일 시스템 사용 (반드시이 브라우저 내에서 액세스 않는 것과 같은 형태로 디스크에 존재하지 않는 디렉토리 구조) API를 사용하여 만든 파일을 나타냅니다

다음은 이러한 작업을 수행하기 위해 API가 직간접 적으로 사용되는 방법에 대한 간단한 예입니다.

구운 상품 *

파일 쓰기 :

bakedGoods.set({
    data: [{key: "testFile", value: "Hello world!", dataFormat: "text/plain"}],
    storageTypes: ["fileSystem"],
    options: {fileSystem:{storageType: Window.PERSISTENT}},
    complete: function(byStorageTypeStoredItemRangeDataObj, byStorageTypeErrorObj){}
});

파일 읽기 :

bakedGoods.get({
        data: ["testFile"],
        storageTypes: ["fileSystem"],
        options: {fileSystem:{storageType: Window.PERSISTENT}},
        complete: function(resultDataObj, byStorageTypeErrorObj){}
});

원시 파일, FileWriter 및 FileSystem API 사용

파일 쓰기 :

function onQuotaRequestSuccess(grantedQuota)
{

    function saveFile(directoryEntry)
    {

        function createFileWriter(fileEntry)
        {

            function write(fileWriter)
            {
                var dataBlob = new Blob(["Hello world!"], {type: "text/plain"});
                fileWriter.write(dataBlob);              
            }

            fileEntry.createWriter(write);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: true, exclusive: true},
            createFileWriter
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, saveFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

파일 읽기 :

function onQuotaRequestSuccess(grantedQuota)
{

    function getfile(directoryEntry)
    {

        function readFile(fileEntry)
        {

            function read(file)
            {
                var fileReader = new FileReader();

                fileReader.onload = function(){var fileData = fileReader.result};
                fileReader.readAsText(file);             
            }

            fileEntry.file(read);
        }

        directoryEntry.getFile(
            "testFile", 
            {create: false},
            readFile
        );
    }

    requestFileSystem(Window.PERSISTENT, grantedQuota, getFile);
}

var desiredQuota = 1024 * 1024 * 1024;
var quotaManagementObj = navigator.webkitPersistentStorage;
quotaManagementObj.requestQuota(desiredQuota, onQuotaRequestSuccess);

FileSystem 및 FileWriter API는 더 이상 표준 트랙에 있지 않지만 다음과 같은 이유로 일부 경우에 사용이 정당화 될 수 있습니다.

• 구현되지 않은 브라우저 공급 업체의 새로운 관심으로 다시 브라우저를 배치 할 수 있습니다.
• (크롬 기반) 브라우저 구현의 시장 침투력이 높음
• Google (Chromium의 주요 기여자)이 API에 대해 수명을 다하지 않았습니다.

그러나 “일부 사례”가 자신의 사례를 포함하는지 여부는 귀하가 결정하는 것입니다.

* BakedGoods는이 사람 이외의 다른 사람에 의해 유지됩니다 🙂

답변

<input type="file" id="file" name="file" onchange="add(event)"/>

function add(event){
  var userFile = document.getElementById('file');
  userFile.src = URL.createObjectURL(event.target.files[0]);
  var data = userFile.src;
}