JavaScript_javascript 기술로 파일을 읽고 저장하는 예

그런데 오늘은 Proxy SwitchySharp의 소스코드를 대충 훑어봤는데, 이번 글에서 소개할 파일을 읽고 저장하는 것까지 포함해서 많은 것을 배웠습니다.

Google에서는 아직 플러그인 데이터 동기화 기능을 제공하지 않기 때문에 플러그인 구성 가져오기 및 내보내기는 파일을 처리해야 합니다. 보안상의 이유로 IE에서만 파일 액세스용 API를 제공하지만 HTML 5가 출시되면서 다른 브라우저에서도 이를 지원하게 되었습니다.

먼저 파일을 읽어보겠습니다. W3C는 몇 가지 파일 API를 제공하며 그 중 가장 중요한 것은 FileReader 클래스입니다.

먼저 사용해야 하는 HTML 태그를 나열하세요.

코드를 복사하세요. 코드는 다음과 같습니다.

< input type="file" id="file" onchange="handleFiles(this.files)"/>

파일을 선택하면 해당 파일이 포함된 목록(FileList 객체) )은 매개변수로 handlerFiles() 함수에 전달됩니다.
이 FileList 개체는 배열과 유사하며 파일 수를 알 수 있으며 해당 요소는 File 개체입니다.
이름, 크기, lastModifiedDate 및 유형과 같은 속성은 이 파일 객체에서 얻을 수 있습니다.
파일을 읽으려면 이 File 객체를 FileReader 객체의 읽기 메소드에 전달하세요.

FileReader에는 4가지 읽기 방법이 있습니다.
1.readAsArrayBuffer(file): 파일을 ArrayBuffer로 읽습니다.
2.readAsBinaryString(file): 파일을 바이너리 문자열로 읽습니다
3.readAsDataURL(file): 파일을 데이터 URL로 읽습니다
4.readAsText(file, [encoding]): 파일 텍스트로 읽혀지며 기본 인코딩 값은 'UTF-8'입니다.
또한 abort() 메서드는 파일 읽기를 중지할 수 있습니다.

파일을 읽은 후에도 FileReader 개체를 처리해야 합니다. 현재 스레드를 차단하지 않기 위해 API는 이벤트 모델을 채택하고 다음 이벤트를 등록할 수 있습니다.
1.onabort: 중단 시 트리거됨
2.onerror: 오류 발생 시 트리거됨
3. onload: 파일을 성공적으로 읽을 때 트리거
4.onloadend: 실패에 관계없이 파일을 읽을 때 트리거
5.onloadstart: 파일을 읽기 시작할 때 트리거
6.onprogress: 주기적으로 트리거 파일을 읽을 때

이러한 방법을 사용하면 파일을 처리할 수 있습니다.
먼저 텍스트 파일을 읽어 보겠습니다.

코드 복사 코드는 다음과 같습니다.

function handlerFiles(files) {
if (files .length) {
var file = files[0];
var reader = new FileReader();
if (/text/w /.test(file.type)) {
reader.onload = function() {
                  $('

' this.result '

').appendTo('body')
}
}
}

여기 있는 This.result는 실제로는 읽은 파일 내용인 reader.result입니다.

테스트해 보면 이 파일의 내용이 웹페이지에 추가되는 것을 확인할 수 있습니다. Chrome을 사용하는 경우 웹페이지를 서버나 플러그인에 넣어야 합니다. 파일 프로토콜이 실패합니다.

브라우저가 데이터 URI 프로토콜의 사진을 직접 표시할 수 있으므로 사진을 다시 시도해 보겠습니다. 그래서 이번에는 사진을 추가하겠습니다.

코드 복사 코드는 다음과 같습니다.

function handlerFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/ text/w /.test(file.type)) {
                                                                                                 이 '"/>').appendTo('body');
                                                                                    >
실제로 input:file 컨트롤은 여러 파일 선택도 지원합니다.





코드 복사


코드는 다음과 같습니다.

이러한 방식으로 handlerFiles()는 파일을 탐색하고 처리해야 합니다. 데이터의 일부만 읽으려는 경우 File 개체에는 Blob 개체를 생성하기 위한 webkitSlice() 또는 mozSlice() 메서드도 있습니다. 이 개체는 File 개체와 동일한 방식으로 FileReader에서 읽을 수 있습니다. 이 두 메소드는 3개의 매개변수를 받습니다. 첫 번째 매개변수는 시작 위치이고, 두 번째 매개변수는 끝 위치입니다. 생략하면 세 번째 매개변수는 콘텐츠 유형입니다. 예시를 보려면 "JavaScript로 로컬 파일 읽기"를 참조하세요. 물론 데이터를 가져오고 파일을 표시하는 것 외에도 AJAX 업로드에도 사용할 수 있습니다. 코드는 "웹 애플리케이션에서 파일 사용"을 참조하세요.

다음 단계는 파일을 저장하는 것입니다.
실제 File API: Writer는 4개의 인터페이스를 제공하지만 현재 일부 브라우저(Chrome 8 및 Firefox 4)에서만 BlobBuilder를 구현하고 나머지 인터페이스는 사용할 수 없습니다.
지원되지 않는 브라우저의 경우 BlobBuilder.js 및 FileSaver.js를 사용하여 지원을 받을 수 있습니다.

조사를 하다가 그 비밀을 알아냈습니다.

BlobBuilder는 Blob 객체를 생성할 수 있습니다. 이 Blob 개체를 URL.createObjectURL() 메서드에 전달하여 개체 URL을 가져옵니다. 그리고 이 개체 URL은 이 Blob 개체의 다운로드 주소입니다.

다운로드 주소를 얻은 후 요소를 생성하고 href 속성에 다운로드 주소를 할당하고 다운로드 속성에 파일 이름을 할당합니다(Chrome 14에서 지원).

그런 다음 클릭 이벤트를 생성하고 처리를 위해 요소에 전달하면 브라우저가 Blob 개체 다운로드를 시작합니다.
마지막으로 URL.revokeObjectURL()을 사용하여 객체 URL을 해제하고 더 이상 이 파일을 참조할 필요가 없음을 브라우저에 알립니다.

다음은 단순화된 코드입니다.

코드 복사

코드는 다음과 같습니다.


var BlobBuilder || WebKitBlobBuilder || var URL = URL || webkitURL ||

function saveAs(blob, filename) {

var type = blob.type;
var force_saveable_type = 'application/octet-stream';

if (type && type != force_saveable_type) { // 브라우저에서 열지 않고 강제 다운로드 var Slice = blob.slice || blob.webkitSlice || blob.mozSlice; blob = Slice.call(blob, 0, blob.size, force_saveable_type); } var url = URL.createObjectURL(blob); var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'); save_link.href = url;

save_link.download = 파일명;

var event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); save_link.dispatchEvent(event);

URL.revokeObjectURL(url);
}

var bb = new BlobBuilder;
bb.append('Hello, world!');
saveAs(bb.getBlob('text/plain;charset=utf-8'), 'hello world. txt');

테스트 중에 텍스트 파일을 저장하라는 메시지가 표시됩니다. Chrome은 웹페이지를 서버나 플러그인에 배치해야 합니다.