JavaScript_javascript スキルでのファイルの読み取りと保存の例

ところで、今日はProxy SwitchySharpのソースコードをざっと見ただけですが、この記事で紹介するファイルの読み込みや保存など、とても勉強になりました。

Google はプラグイン データを同期する機能をまだ提供していないため、プラグイン設定のインポートとエクスポートにはファイルを扱う必要があります。セキュリティ上の理由から、ファイルにアクセスするための API を提供しているのは IE だけですが、HTML 5 の登場により、他のブラウザもそれをサポートするようになりました。

まずファイルを読み込みましょう。 W3C はいくつかの File API を提供しますが、その中で最も重要なものは FileReader クラスです。

まず、使用する必要がある HTML タグをリストします:

コードをコピーします コードは次のとおりです:

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

ファイルが選択されると、そのファイルを含むリスト (FileList オブジェクト) ) はパラメータとして handleFiles() 関数に渡されます。
この FileList オブジェクトは配列に似ており、ファイルの数を知ることができ、その要素は File オブジェクトです。
名前、サイズ、lastModifiedDate、タイプなどの属性は、この File オブジェクトから取得できます。
この File オブジェクトを FileReader オブジェクトの read メソッドに渡して、ファイルを読み取ります。

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 handleFiles(files) {
if (files .length) {
var file = files[0];
var Reader = new FileReader();
if (/text/w /.test(file.type)) {
リーダー。onload = function() {
$('

' this.result '

').appendTo('body'); }




ここでの This.result は実際には Reader.result であり、これは読み取られたファイルの内容です。
テストすると、このファイルのコンテンツが Web ページに追加されていることがわかります。 Chrome を使用している場合は、Web ページをサーバーまたはプラグインに配置する必要があります。ファイル プロトコルは失敗します。

もう一度画像を試してみましょう。ブラウザはデータ URI プロトコルの画像を直接表示できるため、今回は画像を追加します。

コードをコピー

コードは次のとおりです:

function handleFiles(files) {
if (files.length) {
var file = files[0];
var Reader = new FileReader();
if (/ text/w /.test(file.type)) {
body');
}
Reader.readAsText(file)
$(' コードは次のとおりです:

このように、handleFiles() はファイルを走査して処理する必要があります。

データの一部だけを読み取りたい場合は、File オブジェクトには Blob オブジェクトを生成するための webkitSlice() または mozSlice() メソッドもあります。このオブジェクトは、File オブジェクトと同じ方法で FileReader で読み取ることができます。これら 2 つのメソッドは 3 つのパラメーターを受け取ります。最初のパラメーターは開始位置、2 番目のパラメーターは終了位置 (省略した場合はファイルの最後まで読み取られます)、3 番目のパラメーターはコンテンツ タイプです。
例については、「JavaScript でのローカル ファイルの読み取り」を参照してください。

もちろん、データのインポートやファイルの表示だけでなく、AJAXアップロードにも使用できます。コードについては、「Webアプリケーションからのファイルの使用」を参照してください。

次のステップはファイルを保存することです。
実際には File API: Writer は 4 つのインターフェイスを提供しますが、現在 BlobBuilder を実装しているのは一部のブラウザー (Chrome 8 および Firefox 4) のみであり、残りのインターフェイスは使用できません。

サポートされていないブラウザの場合は、BlobBuilder.js と FileSaver.js を使用してサポートを得ることができます。

調べてみたらその秘密が分かりました。

BlobBuilder は Blob オブジェクトを作成できます。この Blob オブジェクトを URL.createObjectURL() メソッドに渡して、オブジェクト URL を取得します。そして、このオブジェクト URL は、この Blob オブジェクトのダウンロード アドレスです。
ダウンロード アドレスを取得したら、a 要素を作成し、href 属性にダウンロード アドレスを割り当て、download 属性にファイル名を割り当てます (Chrome 14 でサポート)。
次に、クリック イベントを作成し、処理のために a 要素に渡します。これにより、ブラウザーは Blob オブジェクトのダウンロードを開始します。
最後に、URL.revokeObjectURL() を使用してオブジェクト URL を解放し、このファイルを参照する必要がなくなったことをブラウザーに通知します。

以下は簡略化されたコードです:

コードをコピーします

コードは次のとおりです:var BlobBuilder = WebKitBlobBuilder || MozBlobBuilder;var URL = webkitURL || function saveAs(blob, filename) { var type = blob.type;

varforce_saveable_type = 'application/octet-stream';

if (type && type != Force_saveable_type) { //ブラウザで開かずに強制的にダウンロードします
var slide = blob.slice || blob.mozSlice;
blob = slide.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 = ファイル名;

varevent = 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 では、Web ページをサーバーまたはプラグインに配置する必要があります。