JavaScriptでファイルを読み取って保存する方法

javascriptセクションでは、JavaScriptを使用してファイルを読み取って保存する方法を紹介します。

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

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

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

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

ファイルが選択されていません

ファイルが選択されると、ファイルを含むリスト(FileListオブジェクト)がパラメーターとしてhandleFiles()関数に渡されます。

このFileListオブジェクトは配列に似ており、ファイルの数を知ることができ、その要素はFileオブジェクトです。

このFileオブジェクトから、name、size、lastModifiedDate、typeなどの属性を取得できます。

このFileオブジェクトをFileReaderオブジェクトのreadingメソッドに渡すと、ファイルを読み取ることができます。

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() {

                $('
' + this.result + '
').appendTo('body');

            }

            reader.readAsText(file);

        }

    }

}

ここでの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)) {

            reader.onload = function() {

                $('
' + this.result + '
').appendTo('body');

            }

            reader.readAsText(file);

        } else if(/image/w+/.test(file.type)) {

            reader.onload = function() {

                $('').appendTo('body');

            }

            reader.readAsDataURL(file);

        }

    }

}

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

ファイルが選択されていません

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

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

例については、「JavaScriptでローカルファイルを読み取る」を参照してください。

もちろん、データのインポートとファイルの表示に加えて、AJAXアップロードにも使用できます。コードは「Webアプリケーションからのファイルの使用」を参照できます。

ファイルの保存
実際、File API:Writerは4つのインターフェースを提供しますが、現在、一部のブラウザー(Chrome8以降およびFirefox4以降)のみがBlobBuilderを実装しており、他のインターフェースは使用できません。

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

調べて謎を発見しました。

BlobBuilderはBlobオブジェクトを作成できます。このBlobオブジェクトをURL.createObjectURL()メソッドに渡すと、オブジェクトのURLを取得できます。そして、このオブジェクトURLは、このBlobオブジェクトのダウンロードアドレスです。

ダウンロードアドレスを取得したら、要素を作成し、ダウンロードアドレスをhref属性に割り当て、ファイル名をダウンロード属性に割り当てます(Chrome 14以降のサポート)。

次に、クリックイベントを作成し、それを処理する要素に渡します。これにより、ブラウザーは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は、ウェブページをサーバーまたはプラグインに配置する必要があります。

添付:文書作成ツール(乾物)

    /**

     * 写文件

     * @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);

       }

    }

この記事はphp中国語のウェブサイトから来てますjavascripthttps://www.php.cn/course/list/17.html

おすすめ

転載: blog.csdn.net/Anna_xuan/article/details/110558162