JavaScript を使用してファイルを読み取ったり保存したりする方法を学びます

javascript 列では、JavaScript を使用してファイルを読み取り、保存する方法を紹介します。

関連する無料学習の推奨事項: javascript (ビデオ)

Google はまだ同期プラグを提供していないため-in データ関数なので、プラグイン設定のインポートとエクスポートではファイルを処理する必要があります。セキュリティ上の理由から、ファイルにアクセスするための 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アプリケーションからファイルを利用する」を参照してください。

ファイルの保存

実際のファイル 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()来释放这个object 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需要把网页放在服务器上或插件里。

附:写文件工具类(干货)

	/**
	 * 写文件
	 * @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 を使用してファイルを読み取ったり保存したりする方法を学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。