ちなみに、今日、私はプロキシSwitchysharpのソースコードを閲覧し、この記事で紹介するファイルの読み取りや保存など、多くのことを獲得しました。
Googleはプラグインデータの同期の機能を提供していないため、プラグイン構成のインポートとエクスポートはファイルを扱う必要があります。セキュリティ上の理由から、IEのみがファイルにアクセスするAPIを提供します。しかし、HTML 5の到着により、他のブラウザもそれをサポートしています。
まず、ファイルを読むことについて話しましょう。 W3CはいくつかのファイルAPIを提供し、その中で最も重要なのはFileReaderクラスです。
最初に必要なHTMLタグをリストします。
コードコードを次のようにコピーします
ファイルが選択されている場合、ファイル（ファイルリストオブジェクト）を含むリストは、ハンドルファイル（）関数のパラメーターとして渡されます。
このフィルリストオブジェクトは、ファイルの数を示すことができる配列に似ており、その要素はファイルオブジェクトです。
このファイルオブジェクトから、名前、サイズ、lastModifiedDate、タイプなどの属性を取得できます。
このファイルオブジェクトをFileReaderオブジェクトの読みメソッドに渡すと、ファイルを読み取ることができます。
FileReaderには4つの読み取り方法があります。
1。ReadAsRayBuffer（ファイル）：ArrayBufferとしてファイルを読み取ります。
2。readasbinarystring（file）：ファイルをバイナリ文字列として読み取ります
3.ReadAsDataurl（ファイル）：ファイルをデータURLとして読み取ります
4。ReadaStext（ファイル、[エンコード]）：ファイルをテキストとして読み取り、デフォルトのエンコード値は「UTF-8」です
さらに、Abort（）メソッドはファイルの読み取りを停止できます。
ファイルを読み取った後、FileReaderオブジェクトを処理する必要があります。現在のスレッドをブロックしないために、APIはこれらのイベントを登録できるイベントモデルを採用します。
1. Anabort：中断したときにトリガーされます
2. Onerror：エラーが発生したときにトリガーされます
3.ロード：ファイルが正常に読み取られたときにトリガーされます
4.OnloadEnd：ファイルが故障するかどうかに関係なく、ファイルが読み取られたときにトリガーされます
5.OnloadStart：ファイルが読み取りを開始したときにトリガーされます
6.プログレス：ファイルが読み取られたときに定期的にトリガーします
これらのメソッドを使用すると、ファイルを処理できます。
最初にテキストファイルを読んでみましょう：
コードコピーは次のとおりです。
関数ハンドルファイル（ファイル）{
if（files.length）{
var file = files [0];
var reader = new fileReader（）;
if（/text//w+/.test(file.type））{
reader.onload = function（）{
$（ '<pre>' + this.result + '</pre>'）。appendto（ 'body'）;
}
reader.readastext（file）;
}
}
}
this.resultは、実際にはreader.resultです。これは読み取りファイルのコンテンツです。
テスト後、このファイルの内容がWebページに追加されたことがわかります。 Chromeを使用している場合は、Webページをサーバーまたはプラグインに配置する必要があり、ファイルプロトコルは失敗します。
ブラウザはデータURIプロトコルの写真を直接表示できるため、写真をもう一度試してみましょう。今回は写真を追加してください。
コードコピーは次のとおりです。
関数ハンドルファイル（ファイル）{
if（files.length）{
var file = files [0];
var reader = new fileReader（）;
if（/text//w+/.test(file.type））{
reader.onload = function（）{
$（ '<pre>' + this.result + '</pre>'）。appendto（ 'body'）;
}
reader.readastext（file）;
} else if（/image /// w+/。test（file.type））{
reader.onload = function（）{
$（ '<img src = "' + this.result + '" />').AppendTo('Body'）;
}
reader.readasdataurl（file）;
}
}
}
実際、入力：ファイルコントロールは、複数のファイルの選択もサポートしています。
コードコピーは次のとおりです。
<入力型= "file" id = "files" multiple = "" onchange = "handlefiles（this.files）"/>
このようにして、ファイルを処理するには、ハンドルファイル（）を通過する必要があります。
データの一部のみを読みたい場合、ファイルオブジェクトには、BLOBオブジェクトを生成するために使用されるWebKitslice（）またはmozslice（）メソッドもあります。このオブジェクトは、ファイルオブジェクトと同じようにFileReaderによって読み取ることができます。これらの2つの方法は3つのパラメーターを受け取ります。最初のパラメーターは開始位置です。 2番目は終了位置で、省略すると、ファイルの終了が読み取られます。 3番目はコンテンツタイプです。
たとえば、「JavaScriptでローカルファイルの読み取り」を参照してください。
もちろん、データのインポートとファイルの表示に加えて、Ajaxのアップロードにも使用できます。このコードは、「Webアプリケーションからのファイルの使用」を参照するために使用できます。
次に、ファイルを保存します。
実際、ファイルAPI：ライターは4つのインターフェイスを提供しますが、現在、一部のブラウザー（Chrome 8+およびFirefox 4+）のみを実装するBlobbuilderのみを提供しますが、残りのインターフェイスは使用できません。
サポートされていないブラウザの場合、blobbuilder.jsおよびfilesaver.jsを使用してサポートを得ることができます。
私はそれを勉強し、謎を発見しました。
blobbuilderは、blobオブジェクトを作成できます。このブロブオブジェクトをurl.createobjecturl（）メソッドに渡すと、オブジェクトURLを取得できます。そして、このオブジェクトURLは、このBLOBオブジェクトのダウンロードアドレスです。
ダウンロードアドレスを取得した後、要素Aを作成し、ダウンロードアドレスをHREF属性に割り当て、ダウンロード属性（Chrome 14+でサポート）にファイル名を割り当てます。
次に、クリックイベントを作成し、プロセスする要素にこれを手渡します。これにより、ブラウザはBlobオブジェクトのダウンロードを開始します。
最後に、url.revokeobjecturl（）を使用してオブジェクトURLをリリースし、ファイルを参照し続ける必要がないことをブラウザに通知します。
これが簡略化されたコードです：
コードコピーは次のとおりです。
var blobbuilder = blobbuilder || webkitblobbuilder || mozblobbuilder;
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）{// browserで開いていない強制ダウンロード
var slice = blob.slice || blob.webkitslice || blob.mozslice;
blob = slice.call（blob、0、blob.size、force_savable_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 = filename;
var event = document.createevent（ 'mousevents'）;
event.initmouseEvent（ 'click'、true、false、window、0、0、0、0、0、false、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ページを配置する必要があります。