JavaScript 上級 (6) JavaScript によるファイルの読み取りと保存

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() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').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() {
                $(&#39;<pre class="brush:php;toolbar:false">&#39; + this.result + &#39;

').appendTo('body');             }             reader.readAsText(file);         } else if(/image/w+/.test(file.type)) {             reader.onload = function() {                 $('').appendTo('body');             }             reader.readAsDataURL(file);         }     } }

実際、input:file コントロールは複数のファイルの選択もサポートしています。

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

このように、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 = 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);
       } 
	}

美文美图

 

以上就是JavaScript进阶(六)用JavaScript读取和保存文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！