[웹][자바스크립트] javascript 로 file 다루기 - file api

File i/o 는 google chrome 과 mozila , opera 에서 제공한다. IE 는 최신버전에서 제공하는 지는 모르겠다.

http://www.thebuzzmedia.com/html5-drag-and-drop-and-file-api-tutorial/

FileReader

http://www.w3.org/TR/FileAPI/#dfn-filereader

FileReader tutorial

file open and drag and drop

http://www.html5rocks.com/en/tutorials/file/dndfiles/

http://html5demos.com/file-api-simple

위의 예제들중에 local 파일을 가지고 동작하는 몇몇 예제들은 firefox 에서 잘 동작한다. 하지만 chrome 의 최신버전에서는 

  Same Origin Policy

때문에 security error 로 잘 동작 하지 않는다. 구체적으로 이야기 하면 FileReader 의 readAs* 함수들이 제대로 동작하지 않는다.(error 를 발생시킨다.)
 

이것에 대한 해결책으로 <script> 등의 tag 를 이용하는 방법이 아래 있다. 아래를 참조하자. 하지만 이 방법으로는 다른일반적인 file 들에 처리가 가능하진 않다.

 

http://stackoverflow.com/questions/4742467/circumventing-chrome-access-control-allow-origin-on-the-local-file-system

그래서 chrome 의 sop 를 끌 수 있는 방법을 사용한다. 아래를 참고하자.
http://stackoverflow.com/questions/330427/can-i-disable-sop-same-origin-policy-on-any-browser-for-development

역시 같은 문제로 올려놓은 글이다. 댓글까지 읽어보면 현재(2011.06) 상황을 파악할 수 있다.
http://techcommdood.com/techcommdood/latest-chrome-update-breaks-locally-viewed-webhelp/