그건 그렇고, 오늘 나는 프록시 스위치 샤프의 소스 코드를 탐색 하고이 기사에서 소개 할 파일을 읽고 저장하는 등 많은 것들을 얻었습니다.
Google은 플러그인 데이터 동기화 기능을 제공하지 않기 때문에 플러그인 구성 가져 오기 및 내보내기는 파일을 처리해야합니다. 보안상의 이유로 IE만이 파일에 액세스하기위한 API를 제공합니다. 그러나 HTML 5가 도착하면 다른 브라우저도 지원했습니다.
먼저 파일 읽기에 대해 이야기합시다. W3C는 일부 파일 API를 제공하며 가장 중요한 것은 FilEReader 클래스입니다.
먼저 필요한 HTML 태그를 나열하십시오.
코드 코드를 다음과 같이 복사하십시오. <input type = "file"id = "file"onchange = "handlefiles (this.files)"/>
파일이 선택되면 파일 (filleList 객체)이 포함 된 목록은 handleFiles () 함수의 매개 변수로 전달됩니다.
이 fillelist 객체는 파일 수를 알 수있는 배열과 유사하며 요소는 파일 객체입니다.
이 파일 객체에서 이름, 크기, lastModifiedDate 및 유형과 같은 속성을 얻을 수 있습니다.
이 파일 객체를 Filereader 객체의 읽기 메소드로 전달하면 파일을 읽을 수 있습니다.
FilereAder에는 4 가지 독서 방법이 있습니다.
1. readAsArrayBuffer (파일) : 파일을 ArrayBuffer로 읽습니다.
2. readAsbinaryString (파일) : 파일을 이진 문자열로 읽습니다
3. READASDATAURL (파일) : 파일을 데이터 URL로 읽습니다
4. readastext (file, [encoding]) : 파일을 텍스트로 읽고 기본 인코딩 값은 'UTF-8'입니다.
또한 Abort () 메소드는 파일 읽기를 중지 할 수 있습니다.
파일을 읽은 후 FilereAder 객체를 처리해야합니다. 현재 스레드를 차단하지 않기 위해 API는 이러한 이벤트를 등록 할 수있는 이벤트 모델을 채택합니다.
1. ONABORT : 중단시 트리거되었습니다
2. ONERROR : 오류가 발생하면 트리거됩니다
3. 온로드 : 파일을 성공적으로 읽을 때 트리거됩니다
4. 동부 : 파일이 실패 여부에 관계없이 파일을 읽을 때 트리거됩니다.
5. OnloadStart : 파일이 읽기 시작할 때 트리거되었습니다
6. Onprogress : 파일을 읽을 때 주기적으로 트리거합니다
이러한 방법으로 파일을 처리 할 수 있습니다.
먼저 텍스트 파일을 읽어 보겠습니다.
코드 사본은 다음과 같습니다.
함수 핸들 파일 (파일) {
if (files.length) {
var 파일 = 파일 [0];
var reader = new Filereader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ( '<fre>' + this.result + '</pre>'). 부록 ( 'body');
}
reader.readastext (파일);
}
}
}
여기에서 result는 실제로 reader.result이며, 이는 읽기 파일 내용입니다.
테스트 후이 파일의 내용이 웹 페이지에 추가되었음을 알 수 있습니다. Chrome을 사용하는 경우 서버 또는 플러그인에 웹 페이지를 넣어야합니다. 파일 프로토콜이 실패합니다.
브라우저가 데이터 URI 프로토콜의 그림을 직접 표시 할 수 있으므로 사진을 다시 시도해 보겠습니다. 이번에는 사진을 추가하십시오.
코드 사본은 다음과 같습니다.
함수 핸들 파일 (파일) {
if (files.length) {
var 파일 = 파일 [0];
var reader = new Filereader ();
if (/text//w+/.test(file.type)) {
reader.onload = function () {
$ ( '<fre>' + this.result + '</pre>'). 부록 ( 'body');
}
reader.readastext (파일);
} else if (/image /// w+/. test (file.type)) {
reader.onload = function () {
$ ( '<img src = "' + this.result + '"/>').appendto('Body');
}
reader.readasdataurl (파일);
}
}
}
실제로 입력 : 파일 컨트롤은 여러 파일 선택을 지원합니다.
코드 사본은 다음과 같습니다.
<input type = "file"id = "files"multip = ""onchange = "handlefiles (this.files)"/>
이런 식으로 핸들 파일 ()을 처리하려면 핸들 파일 ()을 가로 질러야합니다.
데이터의 일부만 읽으려면 파일 객체에도 Blob Objects를 생성하는 데 사용되는 WebKitsLice () 또는 Mozslice () 메소드도 있습니다. 이 객체는 파일 개체와 마찬가지로 Filereader가 읽을 수 있습니다. 이 두 가지 방법은 3 개의 매개 변수를받습니다. 첫 번째 매개 변수는 시작 위치입니다. 두 번째는 종료 위치이며, 생략되면 파일의 끝이 읽습니다. 세 번째는 콘텐츠 유형입니다.
예는 "JavaScript의 로컬 파일 읽기"를 참조하십시오.
물론 데이터 가져 오기 및 파일 표시 외에도 AJAX 업로드에도 사용할 수 있습니다. 코드는 "웹 응용 프로그램의 파일 사용"을 참조하는 데 사용될 수 있습니다.
다음으로 파일을 저장하십시오.
실제로 파일 API : Writer는 4 개의 인터페이스를 제공하지만 현재 일부 브라우저 (Chrome 8+ 및 Firefox 4+) 만 BlobBuilder를 구현하며 나머지 인터페이스를 사용할 수 없습니다.
지원되지 않는 브라우저의 경우 BlobBuilder.js 및 Filesaver.js를 사용하여 지원을받을 수 있습니다.
나는 그것을 연구하고 미스터리를 발견했다.
BlobBuilder는 Blob 객체를 만들 수 있습니다. 이 Blob 객체를 url.createobjecturl () 메소드로 전달하면 객체 URL을 얻을 수 있습니다. 이 객체 URL 은이 Blob 객체의 다운로드 주소입니다.
다운로드 주소를 얻은 후 요소 A를 작성하고 다운로드 주소를 HREF 속성에 할당 한 다음 파일 이름을 다운로드 속성 (Chrome 14+에서 지원)에 할당하십시오.
그런 다음 클릭 이벤트를 만들어이 요소로 전달하여 브라우저가 Blob 객체 다운로드를 시작하게됩니다.
마지막으로 url.revokeobjecturl ()을 사용하여 개체 URL을 해제하여 브라우저에 파일을 계속 참조 할 필요가 없음을 알립니다.
다음은 단순화 된 코드입니다.
코드 사본은 다음과 같습니다.
var blobbuilder = blobbuilder || WebKitBloBBuilder || Mozblobbuilder;
var url = url || WebKiturl || 창문;
기능 Saveas (Blob, Filename) {
var type = blob.type;
var force_saveable_type = 'Application/Octet-stream';
if (type && type! = force_saveable_type) {// Browser에서 열리지 않음
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 = docum
save_link.href = url;
save_link.download = filename;
var event = document.creeevent ( 'mouseevents');
event.initMouseevent ( '클릭', 참, 거짓, 창, 0, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
save_link.dispatchevent (이벤트);
url.revokeobjecturl (url);
}
var bb = 새로운 blobbuilder;
BB. Append ( '안녕하세요, 세계!');
Saveas (bb.getBlob ( 'text/plain; charset = utf-8'), 'hello world.txt');
텍스트 파일은 테스트 중에 저장하라는 메시지가 표시됩니다. Chrome은 서버 또는 플러그인에 웹 페이지를 배치해야합니다.