ファイル内のjsファイル

ウェブでは、多くの場合、ファイルが、この櫛に対処する必要があります。

1、ファイルの
ファイル（ファイル）インタフェースファイルに関する情報を提供し、JavaScriptコンテンツにそのWebページにアクセスすることができます。
典型的には、ファイルを選択し、<入力>からユーザファイルオブジェクトは、オブジェクト（の<input type =「ファイル」にファイルリスト要素を返さ > 要素は、ファイル属性）は、ドラッグして自由にすることができ、ドロップはれるDataTransfer操作によって生成されたオブジェクトファイル、または上HTMLCanvasElementからmozGetAsFile（）API。
ファイル・オブジェクトは、BLOBの特殊なタイプであり、およびBLOBコンテキストの任意のタイプで使用することができます。例えば、FileReaderの、URL.createObjectURL（）、createImageBitmap （）、及びはXMLHttpRequest.send（）のBLOBファイルと扱うことができる
コンストラクタ：ファイル（）
VAR =のmyFile新しい新ファイル（ビット名[、オプション]）;
  ビット： ArrayBuffer、ArrayBufferView、BLOB、またはアレイのDOMStringオブジェクト-又はこれらのオブジェクトのいずれかの組み合わせ。これは、UTF-8エンコードされたコンテンツファイルです。
  名前：ファイル名またはファイルパスを表す
  任意のオブジェクトのプロパティ：オプション。入力しLASTMODIFIED含まれ、タイプ：のDOMString、それはファイルの内容のMIMEタイプを置くことになると述べました。デフォルトは「」LASTMODIFIED：値は（ミリ秒単位）最終修正Unixタイムスタンプの時刻を示しています。デフォルトでは、日付です。今（）。

プロパティ：Blobインタフェースのプロパティを継承します
  File.lastModified：返し、ファイルが最後だったFileオブジェクトの参照が変更され、UNIXタイム開始値からのミリ秒数（1970年1月1日00:00:00 UTC）があります。読み取り専用
  File.lastModifiedDate：Fileオブジェクトファイルが参照最終更新日オブジェクトだっ返します。読み取り専用
  File.name：Fileオブジェクトが参照されるファイルの現在の名前を返します。読み取り専用
  File.size：ファイルのサイズを返します。読み取り専用
  File.webkitRelativePath：パスまたはURLを関連付けられたファイルに戻ります。読み取り専用
  File.type：ファイルタイプ多目的インターネットメール拡張（MIMEタイプ）を返します。読み取り専用
ファイルのインタフェースは、任意のメソッドを定義しますが、インタフェースのBlobから継承された以下のメソッドはありません。
  Blob.slice（[スタート] [、エンド[、contentTypeの]]]）：アクティブなオブジェクトのBLOBを含む、新しいBlobオブジェクトを返します。指定した範囲のデータ。
      開始：添字で代表ブロブは、最初のものは、ブロブの開始バイトの新しい位置にコピーされるであろう意味し、それが負である場合には、後方から前方にエンドデータから開始するオフセット計算し、そのデフォルト値を使用すると、元の長さのBlobを開始以上の長さを渡す場合、リターンが0の長さになり、Blobオブジェクトの任意のデータが含まれていない、0で
      終わりを：それはにコピーされます新しいブロブの最後のバイト位置、負の場合、オフセットは、後ろから前へのデータの末尾から計算されます。デフォルトでは、元の長さ（サイズ）です。
      contentTypeのは：新しいブロブに新しいドキュメントタイプを提供します。これは値で渡されるように設定そのtype属性を配置します。デフォルト値はnull文字列であります

図2は、ブロブ
Blobオブジェクトは、元のクラスファイルから不変データオブジェクトを表します。JavaScriptは必ずしも表現、ネイティブ形式のブロブのデータではありません。ファイルベースのインタフェースのBlob、ブロブ継承され、ユーザーのシステム上のファイルをサポートするための機能を拡張しました。
コンストラクタ：BLOB（）、新しい新しいブロブ（アレイ、オプション）
配列：配列である、またはBLOBに保持されるArrayBuffer、ArrayBufferView、BLOBのDOMStringおよび他の目的で作られた他の類似オブジェクト、の混合物。
オプションオプションBlobPropertyBag辞書は次の2つのプロパティ、種類や語尾を指定することがあり、タイプ、デフォルト値はMIMEタイプの語尾は、デフォルト値の配列ブロブの内容に置かされる表し、「」であります\ nはどのように文字列が書かれているとなるラインターミネータを指定するため、「透明」です。これは、2つの値のいずれかです。「ネイティブ」、行末に代わってブロブの代わりに、ホスト・オペレーティング・システム、ファイルシステム、改行、または「透明」は、同じ語尾の中に保存されたままになります収まるように変更されます

プロパティと方法
Blob.size：（バイト単位）のデータサイズは、Blobオブジェクトを含んでいました。読み取り専用
Blob.type：Blobオブジェクトを含むデータのMIMEタイプを示す文字列。タイプが不明である場合、値は空の文字列です。読み取り専用
Blob.slice（[開始、[終了、 [contentTypeの]]]）：指定された範囲内のデータ・ソースのBlobオブジェクトを含む新しいBlobオブジェクトを返します。

。3、FileReaderの
FileReaderのオブジェクトは、Webアプリケーションの非同期のファイルまたはBlobオブジェクトファイルを使用して、ユーザーのコンピュータに保存されたファイル（または生データ・バッファ）コンテンツを、読んだり、読み込むデータを指定することができます。
コンストラクタ：新規FileReader（）
属性：
  ファイルを読み込むときFileReader.error、DOMExceptionが、エラーが発生しました。読み取り専用
  FileReader.readyState：FileReaderの状態を表す数値。値は以下の通りである：0（空の、任意のデータがロードされていない）、1（LOADING、データがロードされている）、2（DONE、読み出し要求のすべてを完了しました）。読み取り専用
  FileReader.result：ファイルの内容。読み出し動作が完了した後にこの属性にのみ有効である、データ・フォーマットは、読み出し動作を開始するために使用する方法に依存します。読み取り専用
イベントハンドラ：
  FileReader.onabort：イベントを中止する処理。読み出し動作が中断されたときに、このイベントがトリガされた
  エラーイベントの処理：FileReader.onerror。読み出し動作エラーが発生したときに、このイベントがトリガされた
  処理負荷のイベント：FileReader.onloadを。読み出し動作が完了したときに、このイベントがトリガされ
  、処理loadstartイベント：FileReader.onloadstart。読み取り処理が開始したときに、このイベントがトリガされ
  、処理loadendイベント：FileReader.onloadendを。読み出し動作トリガの最後にイベント（成功または失敗のいずれか）
  FileReader.onprogress：progressイベントを処理します。ブロブを読むときにイベントがトリガ
  FileReaderのはとてもこれらのイベントのすべてが、addEventListenerメソッドでも使用することができ、のEventTargetから継承されたため。

方法：
  FileReader.abort（）：読み出し操作を中止します。その見返りに、readyStateのプロパティが行われます。読み出し動作のための操作を中止することFileReaderをの進捗（readyStateがないLOADING）ではありません、それはDOM_FILE_ABORT_ERRエラーがスローされます。
  FileReader.readAsArrayBuffer（ブロブ|ファイル）：指定されたBlobまたはファイルの内容を読み始めるために使用されます。読み出し動作が完了すると、属性のデータ・ファイルを表す結果ArrayBufferオブジェクトを含むが、DONE（完了）へのreadyState、トリガイベントloadendは、読み取られます。
  FileReader.readAsBinaryString（ブロブ|ファイル）：resultプロパティは、元のファイルの読み込みが含まれますが、読み込みが完了すると、readyStateのは（完了）DONEになり、トリガloadendイベント時に、指定されたBLOBまたはFileオブジェクトを読んでバイナリ形式。W3Cワーキングドラフトから廃止2012年7月12日から、。
  FileReader.readAsDataURL（ブロブ|ファイル）：指定されたBLOBまたはFileオブジェクトをお読みください。resultプロパティにデータが含まれる一方のreadyStateが完了したとき、操作が完了した読む、DONEとなり、トリガloadendイベントます：ファイルの読み込みの内容を表現する文字列（Base64エンコード）URL形式。
  FileReader.readAsText（BLOB | [、符号化ファイル ]）またはファイルオブジェクトブロブは、例えばデフォルトとして、2番目のパラメータは符号化の文字列型であり、特定の符号化フォーマットのコンテンツ（文字列）に応じてデフォルトを形質転換することができますそれは、 "UTF-8"タイプです。
このメソッドは、実行が直視が決定的である、とundefinedを返した場合、結果を表示することができることが完了した後にのみ意味、非同期です。onloadイベントは、マウントまたは治療の方法のonloadend例なければなりません。変換が完了すると、このパラメータは、完全な状態で行わreadyStateの、イベント（「loadend、負荷」に変換されます）マウントイベントがトリガされ、属性の結果を読み取るために、ファイルの内容を表す文字列が含まれています、イベントのパラメータもでevent.target.resultイベントハンドラ可能に

URL
  URL.createObjectURL（|ブロブ|ファイルMediaSourceの）静的メソッドは、表現を指定されたURLオブジェクトのパラメータが含まれていたDOMStringを作成します（IMGを指定することができます、IFRAMEのsrc属性）。ライフサイクルのURLと結合そのウィンドウの文書を作成します。新しいURLのFileオブジェクトは、指定されたオブジェクトまたはBLOBオブジェクトを表します。
  URL.revokeObjectURL（いるObjectURL）。
各コールcreateObjectURL（）メソッドは、パラメータとして作成したのと同じオブジェクトとしてきた場合でも、新しいURLオブジェクトを作成します。これらのURLオブジェクトが不要になった場合には、各オブジェクトが解放するURL.revokeObjectURL（）メソッドを呼び出してはなりません。ブラウザが自動的に文書出口それらを解放します。



https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications

  var aFileParts = ['<a id="a"><b id="b">hey!</b></a>']; // 一个包含DOMString的数组
    var oMyBlob = new Blob(aFileParts, {type : 'text/html'}); // 得到 blob

    // 使用 Blob 创建一个指向类型化数组的URL
    var typedArray = GetTheTypedArraySomehow();
    var blob = new Blob([typedArray], {type: "application/octet-binary"});// 传入一个合适的MIME类型
    var url = URL.createObjectURL(blob);// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串，你可以像使用一个普通URL那样使用它，比如用在img.src上。

    //从 Blob 中提取数据，从Blob中读取内容的唯一方法是使用 FileReader
    // 一个文件上传的回调 <input type="file" onchange="onChange(event)">
    function onChange(event) {
        var file = event.target.files[0];
        var reader = new FileReader();
        reader.onload = function(event) {
            // 文件里的文本会在这里被打印出来
            console.log(event.target.result)
        };

        reader.readAsText(file);
    }

    var file = new File(["foo"], "foo.txt", {
        type: "text/plain",
    });
    console.log(file);

おすすめ