HTML5で提供されるファイルAPIには、フロントエンドのアップロード、ダウンロード、読み取りなど、豊富なアプリケーションがあります。また、IE10以外のバージョンのみをサポートする場合を除き、モバイル端末を含む各ブラウザの互換性も優れています。操作ファイルの関数をより適切にマスターしたい場合は、まずすべてのAPIを慣れさせなければなりません。
フィルリストオブジェクトとファイルオブジェクトHTMLの入力[type = file]ラベルには複数の属性があり、ユーザーが複数のファイルを選択できるようにします。Filelistオブジェクトは、ユーザーが選択したファイルのリストを意味します。このリストの各ファイルはファイルオブジェクトです。
<入力タイプ=ファイルID = Multise> <script> var Elem = document.getElementByid（ 'ファイル'）;画像とファイルサイズは200kb未満です（files [i] .type.indexof（ 'image/'）！== -1 && files [i] .size <204800）{console.log（files [i] .name）;}}} </script>入力には、ファイルアップロードで送信できるファイルタイプを指定するために使用できるアクセス属性があります。
Accept = Image/*は、画像形式のアップロードにのみ制限するために使用できます。ただし、WebKitブラウザの下での応答が遅いことに問題があります。
解決策は、*パスを指定されたMIMEタイプに変更することです。
<入力型=ファイルcomppat = image/gif、image/jpeg、image/jpg、image/png>Blobオブジェクト
BLOBオブジェクトは、バイナリデータの保存に使用できるコンテナに相当します。 2つの属性があり、サイズ属性はバイトの長さを表し、型属性はmimeタイプを表します。
作成方法
BLOBオブジェクトは、BLOB（）コンストラクト関数を使用して作成できます。
var blob = new blob（['hello']、{type：text/plain}）;BLOBコンストラクターの最初のパラメーターは、ArrayBufferオブジェクト、ArrayBufferViewオブジェクト、BLOBオブジェクト、文字列を保存できる配列です。
BLOBオブジェクトは、Slice（）メソッドを介して新しいBLOBオブジェクトを返すことができます。
var newblob = blob.slice（0,5、{type：text/plain}）;Slice（）メソッドは、すべてオプションの3つのパラメーターを使用します。最初のパラメーターは、BLOBオブジェクトのバイナリデータの開始位置を表し、2番目のパラメーターは複製の終了を表し、3番目のパラメーターはBLOBオブジェクトのMIMEタイプです。
canvas.toblob（）は、Blobオブジェクトを作成することもできます。 toblob（）は3つのパラメーターを使用します。1つ目はコールバック関数、2番目は画像タイプ、デフォルトは画像/png、3番目は画質、値は0〜1です。
var canvas = document.getElementById（ 'canvas'）; toblob（blob）{console.log（blob）;}、image/jpeg、0.5）;ファイルをダウンロードしますBlodオブジェクトは、window.urlオブジェクトを介してネットワークアドレスを生成し、Aタグのダウンロード属性と組み合わせて、ダウンロードファイル機能を達成できます。
たとえば、キャンバスを画像ファイルとしてダウンロードします。
var canvas = document.getElementById（ 'canvas'）; canvas.toblob（blob）{// create objecturnを使用してアドレスを生成します。 var url = url.createobject "blob）; var a = document.createelement（ 'a'）; a.download = 'canvas'; a.href = url; // a.click（）; / / /ダウンロード後にブラウザを伝えます。文字列は、同様の方法を持つテキストファイルとして保存することもできます。
FilReaderオブジェクトFileReaderオブジェクトは、主にファイルをメモリに読み取り、ファイル内のデータを読み取るために使用されます。関数を構築して、FilReaderオブジェクトを作成します
var reader = new filerereader（）;
オブジェクトには次の方法があります。
一般的なアプリケーションは、クライアントに写真をアップロードした後、readasdataurl（）を介して画像を表示することです。
<入力型=ファイルID =ファイルaccept = image/jpeg、image/jpg、image/png> <img src = blank.gif id = preview> <script> var elem = d（ 'files'）、img = document。 getElementByid（ 'preview'）; .src = ev.target.result;} reader.readasdataurl（files [0]）;}} </script>
ただし、携帯電話で写真を撮ると、写真をアップロードする際にバグがあり、サムスンやiPhoneなどの写真が見つかります。エッセンスエッセンス解決策はここで説明していません。
データのバックアップと回復FileReaderオブジェクトのReadaStext（）は、ファイルの関数と組み合わせてファイルをダウンロードすると、データをローカルエリアにバックアップすることができます入力およびreadaStext（）を使用して、readastext（）を使用してテキストを読み取り、データを復元します。
コードは上記の機能に似ています
base64エンコーディングAtoBおよびBTOAメソッドがHTML5に追加され、Base64エンコーディングがサポートされます。それらの命名は非常に単純です。これはコーディングとデコードを表します。
var a = https：//lin-xin.github.io; iConsole.log（b）;
BTOAメソッドは文字列Aをエンコードしますが、これはAの値を変更せず、エンコード後に値を返します。
ATOBメソッドは、エンコードされた文字列を解読します。
ただし、パラメーターの中国人は8ビットASCIIエンコードの文字範囲を超えており、ブラウザはエラーを報告します。したがって、最初にecodeuricomponentをエンコードする必要があります。
var a = var btoa（a）decodeuricomponent（b）;
上記は、この記事のすべての内容です。