web-dev-qa-db-ja.com

HTML5 File APIのFileReader.readAsTextの仕組み

アップロードしたファイルが存在するかどうかを確認するために、HTML5ファイルAPIを使用して次のコードを作成しました。

_<input type="file" id="myfile">
<button type="button" onclick="addDoc()">Add Document</button>
<p id="DisplayText"></p>_

次のJavaScriptコードは、次のようにマッピングされています。

_function addDoc() {
  var file=document.getElementById("myFile").files[0]; //for input type=file
  var reader=new FileReader();
  reader.onload = function(e) {}
  reader.readAsText(file);
  var error = reader.error;
  var texte=reader.result;
  document.getElementById("DisplayText").innerText=reader.result; /*<p id="DisplayText>*/
}
_

ローカルシステムからファイルを参照した後、addDoc()をクリックする前に、フォルダーから「参照」ドキュメントを削除しようとしました。ボタンをクリックした後でも、_Filereader.result_がnullではなく、すべてのコンテンツを表示できることがわかりました。

誰かがFilereaderの仕組みを説明できますか？ファイルが参照されるとすぐにFileReaderがバインドされますか？

また、システムが読み取り専用属性がFileReader Java File.canread()？

誰かがこれについて提案できますか？コードをテストするIE11があります。

javascripthtml5drag-and-droptextareafileapi
11
sushmithaP

FileReaderオブジェクトを使用すると、Webアプリケーションは、FileオブジェクトまたはBlobオブジェクトを使用して読み取るファイルまたはデータを指定し、ユーザーのコンピューターに保存されているファイル（または生データバッファー）のコンテンツを非同期に読み取ることができます。

ファイルオブジェクトは、ユーザーが要素を使用してファイルを選択した結果として返されるFileListオブジェクト、ドラッグアンドドロップ操作のDataTransferオブジェクト、またはHTMLCanvasElementのmozGetAsFile（）APIから取得できます。

readAsTextメソッドは、指定されたBlobまたはFileの内容を読み取るために使用されます。読み取り操作が完了すると、readyStateがDONEに変更され、ロードエンドがトリガーされ、result属性にファイルの内容がテキスト文字列として含まれます。

構文

instanceOfFileReader.readAsText(blob[, encoding]);

パラメータ

Blob

読み取り元のBlobまたはFile。

encodingオプション

返されるデータに使用するエンコードを指定する文字列。このパラメーターが指定されていない場合、デフォルトではUTF-8が想定されます。

ファイルに関するメタデータについては、次のようにFileオブジェクトFを確認できます。Fの読み取り可能状態はOPENEDです。 Fは、バイトのバイトシーケンスを指します。 F.sizeは、バイト単位の合計バイト数に設定されます。 F.nameはnに設定されます。 F.typeはtに設定されます。

注：Fileオブジェクトのタイプを表すASCIIエンコード文字列がバイトシーケンスに変換されたときに、MIMEタイプアルゴリズム[MIMESNIFF]の未定義を返さない場合、ファイルのタイプtは解析可能なMIMEタイプと見なされます。

F.lastModifiedはdに設定されます。

FileReader 、 File 、および readAsText のブラウザの互換性と詳細なドキュメントの詳細については、MDNで、これも FileApiのW3Cドラフト =

1
Samdeesh