ファイルを読み取って保存するための JavaScript
Google はプラグイン データを同期する機能をまだ提供していないため、 、インポートおよびエクスポート プラグイン設定をエクスポートするには、ファイルを処理する必要があります。セキュリティ上の理由から、ファイルにアクセスするための API を提供しているのは IE だけですが、HTML 5 の登場により、他のブラウザもそれをサポートするようになりました。
まずファイルを読みましょう。 W3C はいくつかの File API を提供しますが、その中で最も重要なものは FileReader クラスです。
最初に、使用する必要がある HTML タグをリストします。
<input type="file" id="file" onchange="handleFiles(this.files)"/>
ファイルが選択されると、そのファイルを含むリスト (FileList オブジェクト) がパラメータとして handleFiles() に渡されます。関数。
この FileList オブジェクトは配列に似ており、ファイルの数を知ることができ、その要素は File オブジェクトです。
この File オブジェクトから、名前、サイズ、lastModifiedDate、タイプなどの属性を取得できます。
この File オブジェクトを FileReader オブジェクトの読み取りメソッドに渡してファイルを読み取ります。
FileReader には 4 つの読み取りメソッドがあります:
readAsArrayBuffer(file): ファイルを ArrayBuffer として読み取ります。
readAsBinaryString(file): ファイルをバイナリ文字列として読み取ります
readAsDataURL(file): ファイルをデータ URL として読み取ります
readAsText(file, [encoding] ) : ファイルをテキストとして読み取ります。デフォルトのエンコード値は「UTF-8」です。
さらに、abort() メソッドはファイルの読み取りを停止できます。
ファイルを読み取った後も、FileReader オブジェクトを処理する必要があります。現在のスレッドをブロックしないように、API はイベント モデルを採用しており、次のイベントを登録できます。
onabort: 中断されたときにトリガーされます
onerror: エラーが発生したときにトリガーされます
onload: ファイルの読み取りに成功しました。フェッチが完了するとトリガーされます。
onloadend: 失敗に関係なく、ファイルが読み取られるときにトリガーされます。
onloadstart: ファイルの読み取りが開始されるときにトリガーされます。
onprogress: ファイルが読み取られると、定期的にトリガーします。
これらのメソッドを配置すると、ファイルを処理できます。
まずテキスト ファイルを読んでみましょう:
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text/w+/.test(file.type)) {
reader.onload = function() {
$('<pre class="brush:php;toolbar:false">' + this.result + '').appendTo('body');
}
reader.readAsText(file);
}
}
}<span style="font-family: Arial, Helvetica, sans-serif;">这里的this.result实际上就是reader.result，也就是读取出来的文件内容。</span>
テストすると、このファイルのコンテンツが Web ページに追加されていることがわかります。 Chrome を使用している場合は、Web ページをサーバーまたはプラグインに配置する必要があります。ファイル プロトコルは失敗します。
画像をもう一度試してみましょう。ブラウザはデータ URI プロトコルの画像を直接表示できるため、今回は画像を追加します。
function handleFiles(files) {
if (files.length) {
var file = files[0];
var reader = new FileReader();
if (/text/w+/.test(file.type)) {
reader.onload = function() {
$('<pre class="brush:php;toolbar:false">' + this.result + '').appendTo('body');
}
reader.readAsText(file);
} else if(/image/w+/.test(file.type)) {
reader.onload = function() {
$('実際には、input:file コントロール複数のファイルの選択もサポートしています。
<input type="file" id="files" multiple="" onchange="handleFiles(this.files)"/>
このように、handleFiles() はファイルを走査して処理する必要があります。
データの一部のみを読み取りたい場合は、File オブジェクトには Blob オブジェクトを生成するための webkitSlice() または mozSlice() メソッドもあります。このオブジェクトは、File オブジェクトと同じ方法で FileReader で読み取ることができます。これら 2 つのメソッドは 3 つのパラメータを受け取ります: 最初のパラメータは開始位置、2 番目のパラメータは終了位置 (省略した場合はファイルの最後まで読み取られます)、3 番目のパラメータはコンテンツ タイプです。
データのインポートやファイルの表示だけでなく、AJAXアップロードにももちろん利用できます コードについては「Webアプリケーションからファイルを利用する」を参照してください。
実際のファイル 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 = BlobBuilder || WebKitBlobBuilder || MozBlobBuilder;
var URL = URL || webkitURL || window;
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 = filename;
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 では、Web ページをサーバーまたはプラグインに配置する必要があります。
/**
* 写文件
* @param fileName 文件名
* @param data 文件流
* @param path 写入路径
* @return boolean
*/
public static boolean writeFile(String fileName,String data,String path) {
try {
// System.out.println("fileContent:" + data);
File file = new File(path + fileName);
if(!file.exists()){
file.createNewFile();
}
FileOutputStream outStream = new FileOutputStream(file);
outStream.write(data.getBytes());
outStream.flush();
outStream.close();
outStream = null;
return(true);
} catch (Exception e) {
e.printStackTrace();
return(false);
}
}更多编程相关知识，请访问：编程教学！！
以上がJSでファイルを読み取って保存するにはどうすればよいですか?手法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
