HTML5/JS 파일을 쓸 수 있습니까?

Question

HTML5/JS의 파일에 쓸 수있는 방법이 있는지 궁금합니다. broswer에서 ...

Answer 1

예, 새로운 FileWriter API를 사용합니다.

http://www.w3.org/TR/file-writer-api/

현재 현재 브라우저 지원을 볼 수 http://caniuse.com/#feat=filesystem

Answer 2

지금까지 내가 사용자의 파일에 대한 웹 페이지 액세스를 제공하기 때문에, 당신은 HTML5의 파일에 쓸 수 없습니다 알고있는 것 보안 상 위험 할 수 있습니다.

페이지에서 나중에 액세스 할 수 있도록 일부 데이터 만 저장하면 HTML5에는이를 수행 할 수있는 웹 저장소라는 것이 있습니다.

또는 쿠키가있는 경우 데이터를 저장할 수도 있고 서버에 저장할 수도 있습니다.

Answer 3

예 HTML5 + JS를 사용하여 & 개의 파일을 읽을 수 있습니다.

링크는 시작하는 - 최종 목표는 사용자가 저장하도록하는 것입니다 가정 http://speckyboy.com/2012/10/30/getting-to-grips-with-the-html5-file-api-2/

Answer 4

- 나는 또한 당신이 유용하게 찾을 수있는 동일한 주제에 SpeckyBoy을 위해 잠시 다시 기사를 쓴

Exploring FileSystem API 링크를 마우스 오른쪽 버튼으로 클릭하고 "다른 이름으로 저장 ..."을 선택할 때와 같이 파일을 찾을 수있는 곳의 파일은 보안 고려 사항으로 인해 해당 API에 대한 광범위한 브라우저 범위가 아직 없습니다.

그러나 API가 무엇이든간에 - 제안 된 파일 이름을 지정하는 download 속성이있는 data: uri에 대한 링크를 사용하면 문제를 해결할 수 있습니다. 예를 들어 : 클릭하면

<a id="save" download="earth.txt" href="data:text/plain,mostly harmless&#10;">Save</a> 

는, 적어도 크롬, 이것은 다운로드 디렉토리에 earth.txt 같은 텍스트 mostly harmless를 포함하는 파일 (그리고 후행 줄 바꿈)을 저장합니다. 대신 자바 스크립트에서 파일의 내용을 설정하려면 먼저이 함수를 호출 :

function setSaveFile(contents, file_name, mime_type) { 
    var a = document.getElementById('save'); 
    mime_type = mime_type || 'application/octet-stream'; // text/html, image/png, et c 
    if (file_name) a.setAttribute('download', file_name); 
    a.href = 'data:'+ mime_type +';base64,'+ btoa(contents || ''); 
} 

Answer 5

또 다른 가능성은 Windows 플랫폼에서의 ClickOnce 응용 프로그램 같은 것을 만드는 것을 고려하는 것입니다. 이것은 사용자 OS에서 실행될 다운로드 가능한 실행 파일에 대한 링크를 제공하지만 웹 기반 콜백을 만들어 데이터를 보내고 검색 할 수 있습니다. ClickOnce 앱은 브라우저 컨트롤을 내장 할 수 있으므로 사용자의 저장 공간과 직접 대화 할 수있는 웹 호환 응용 프로그램을 사용할 수 있습니다.

Answer 6

이 질문에 대한 답은 다음 질문에 대한 답에 따라 달라집니다 : 당신은 이러한 기능에 대한 지원을 사실 현재는 크롬 기반 브라우저 (크롬 & 오페라)에 존재 괜찮

• 있습니까?
• 이러한 기능을 활용하기 위해 독점적 인 API를 사용하는 것이 좋습니다.
• 향후이 API를 삭제할 수 있습니까?
• 샌드 박스 (파일 외부에 아무런 영향을 미치지 않는 위치)에 대한 API로 만든 파일 수축은 괜찮습니까? "예"위의 모든 응답 한 경우

, 다음 예, FileWriter 및 FileSystem API를 사용하여, 당신은 자바 스크립트를 사용하여 브라우저 탭/창의 맥락에서 파일을 작성할 수 있습니다. 여기

은 API를이 수행 직렬로 사용하는 방법의 간단한 예이다 BakedGoods 함께

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); 

을 *에 공통 스토리지 동작들을 수행하는데 사용될 수있는 균일 한 인터페이스를 설정하는 자바 스크립트 라이브러리 위의이 달성됩니다 (파일 시스템을 포함한) 모든 기본 및 일부 비 기본 저장 시설은 :

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

파일 시스템 사양은 디렉토리 구조가 디스크에 표시되는 방법에 아무런 지침을 정의하지 않는다. 예를 들어 Chromium 기반 브라우저에서 샌드 박스에는 가상 파일 시스템 (브라우저에서 액세스 할 때와 동일한 형식으로 디스크에 반드시 존재하는 것은 아닌 디렉토리 구조)이 있으며 디렉토리와 파일이 생성됩니다 API가 배치됩니다.

API를 사용하여 시스템에 파일을 쓸 수도 있지만 API가없는 파일 (FileSystem API없이)을 찾는 것은 간단한 일이 아닙니다.

* BakedGoods는 로컬 또는 원격에서이 바로 여기 사람 :