ファイルタイプの入力タグのファイルプロパティは何ですか？

Question

アップロードされたテキストファイルの内容を表示したいと思います。しかしfiles[0]プロパティがtextfileの理由がわかりません。私はインターネットを検索しようとしますが、これに関する結果はありません。 Mozillaの開発者向けサイトによると

<center> 
    <input id="textfile" type="file"> 
    <input id="upload" type="submit" value="Upload"> 
</center> 

<script type="text/javascript"> 
    var textfile = document.getElementById("textfile"); 
    var upload = document.getElementById("upload"); 

    upload.addEventListener("click",function() { 
     var fileReader = new FileReader(); 
     fileReader.readAsText(textfile.files[0]); 
     fileReader.onload = function (event) { 
      alert(event.target.result); 
     } 
    }); 
</script> 

Answer 1

filesプロパティには、<input type="file">要素で選択されたファイルのリストが含まれています。ユーザーが複数のファイルを選択できるようにするには、multiple属性を使用できるため、これはリストです。このオプションを選択しないと、選択したファイルは常にfiles[0]になります。 FileListは配列のようなものなので、通常の配列インデックス構文で要素にアクセスできます。単一のファイルセレクタと複数のファイルセレクタの両方で同じ表現を使用すると、入力を処理するコードに一貫性が維持されます。リストに1つの.fileプロパティまたは.filesプロパティがあるかどうかを心配する必要はありません。

各要素は、選択したファイルに関する情報を含むFileオブジェクトです。そして、これをFileReader APIに渡して、ファイルの内容にアクセスすることができます。 Mozillaの開発者向けサイトによると、 _Fileオブジェクトは、一般的にファイルリストオブジェクトから取得され

Answer 2

、

ファイルオブジェクトは、一般的にファイルリストオブジェクトから取得されている要素を使用してファイルをユーザが選択した結果として を返しました。

したがって、複数ではありませんが、File APIは配列自体を1つの要素で取得します。