HTML5ファイルインターフェイスはファイルを使用してWebページにダウンロードします

ファイルインターフェイスは、ファイルに関連する情報を提供し、ファイルのコンテンツにアクセスするためにWebページでJavaScriptを実行します。

ファイルオブジェクトは、ユーザーによって返されたファイルリストオブジェクトから供給され、ドラッグアンドドロップ操作のDatAtransferオブジェクトから入力タグを使用してファイルを選択します。ファイルオブジェクトは、BLOBで使用できるコンテキストで使用できる特別なブロブです。

Webページでファイルを使用するには、通常関与する必要があるオブジェクトは、ファイルオブジェクト、FileListオブジェクト、FileReaderオブジェクトです。

FileListは、入力要素のファイルプロパティとドラッグアンドドロップAPIの2つの場所から来ています（ファイルがドラッグされると、event.datatransfer.filesはフィルリストオブジェクトです）

 <入力ID = fileItem type = filelist = document.getElementById（ 'fileitem'）

長さ：この属性は、フィルリストオブジェクトに含まれるファイルオブジェクトの長さのみを返します。

item（index）：ファイルリストオブジェクトの指定された位置で指定されたファイルオブジェクトを取得します。いくつかの配列インデックスの形で説明できます

各ファイルリストオブジェクトはファイルオブジェクトです。ファイルオブジェクトは特別なブロブです。

1.lastModify：ファイルが改訂された時期、今回は1970年1月1日に0：0：00に渡されたミリ秒です。これは読みやすい属性です

2.NAME：ファイルオブジェクトによって参照されるファイルのファイル名、これは読み取り可能な属性です

3.Type：ファイルオブジェクトによって参照されるファイルのファイルタイプは、読み取り可能な属性である鉱山タイプです。

4.サイズ：ファイルオブジェクトで参照されるファイルのファイルサイズ、この1つの読み取り属性。

ファイルオブジェクトのみを定義する方法はありませんが、Blobオブジェクトから継承する方法があります。

FileReaderオブジェクトにより、Webアプリケーションはユーザーコンピューター上のファイルを非同期に読み取ることができます。

FileReader（）は、新しいFilReaderオブジェクトを作成できるコンストラクターです。

var fileReader = new filereader（）;

1.エラー：読み取りプロセス中に発生するエラーを返します。

2. Result：ファイルのコンテンツを返し、タイプはタイプまたはArrayBufferに値します。この属性は、操作を読んだ後にのみ合法です。

3.ReadyState：操作の現在の状態を返します。

1.abort（）：操作を中断します。 ReadyStateの値は2。2になります。

2。ReadAsRayBuffer（BLOB）：ファイルオブジェクトなどの指定されたBLOBを読み取ります（ファイルオブジェクトは特別なBLOBです）。読み取りが完了している限り、ReadyStateプロパティの値は2になり、結果属性はファイルデータを表すArrayBufferです。

3。ReadasDataurl（BLOB）：ファイルオブジェクト（特別なブロブ）などの指定されたブロブを読み取ります。読み取りが完了している限り、ReadyState属性の値は2になります。結果属性はファイルデータを表すURLであり、データ形式はbase64エンコード文字列です

<入力型= file onchange = previewfile（）> <br> <img src = heigh = document.queeryselector（ 'img'）; files [0];

4。ReadaStext（Boob、Encoding）：ファイルオブジェクト（ファイルオブジェクトは特別なブロブです）など、指定されたブロブを読み取ります。読んでいる限り、ReadyStateプロパティの値は2になり、結果属性はファイルデータを表すテキスト文字列です。 2番目のパラメーターは、結果属性の中国テキスト文字列のエンコード方法を指定するために使用され、デフォルトはUTF-8です。

1.abort：操作を読むときの終了。

2。エラー：操作中に操作が読み取られたときにトリガーされます。

3.ロード：操作を正常に読み取るときにトリガーされます。

4. LoadEnd：読み取り操作の最後にトリガーされます。成功や失敗を読むことはできません。

5.LoadStart：読み取り操作の開始時にトリガーされます。

6.プロセス：読書プロセス中にトリガーされます。

HTML5のファイルオブジェクトを使用して、選択したローカルファイルにアクセスして、これらのファイルのコンテンツを読み取ることができます。ファイルオブジェクトは、入力要素またはドラッグアンドドロップインターフェイスからのものです。

<入力型=ファイルID =入力>

入力を介して選択されたファイルにアクセスします

var selectfile = document.getElementByID（ '入力'）。

一度に一度に1つのファイルを選択できます。一度に複数のファイルを選択する場合は、入力要素に複数の属性を追加し、複数の属性をTrueに設定する必要があります。 Gecko 1.9.2の前に、一度に複数のファイルを選択します。

ドラッグアンドドロップインターフェイスの場合、HTML5 DRAGEVENTを表示できます。

ステップ1：配置領域を作成します。 div、pなどの通常の要素。

ステップ2：ドロップ、ドラッグスター、ドラッグオーバーイベント処理プログラムを配置されたエリアに追加します。重要な役割は、ドロップイベント処理プログラムです。

以下は、短いドローイング図の例です。

 <div id = 'dropbox' class = 'dropbox> </div> dropbox {border：solid 3px red：400px;}

 var dropbox = documentbox（ドロップボックス）; （e）{E.StopPropagation（）; ）; var dt = e.datatransfer = dt.files（files）; i]; var imagetype //; ; var reader = new filedereader（）;

上記は、XiaobianがWebページにダウンロードするために紹介するHTML5ファイルインターフェイスです。 VEVBウーリンのウェブサイトへのご支援ありがとうございます！