FileListオブジェクト

FileListオブジェクトとは何かとその使用方法を確認してください

のあるHTMLフォームがある場合<input type="file" />要素、1つ以上のファイルがユーザーによってアップロードされると、FileListオブジェクト。

それはあなたに与えることができる唯一の場所ではありませんFileListオブジェクト。ドラッグアンドドロップを操作するときにも取得できます。

フォームに固執すると、入力タイプはデフォルトで複数のファイルをアップロードすることを許可しません。

1つの要素のみでFileListを取得し、次の構文を使用して取得できます。

<input type="file" />

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList[0]
})

から任意の要素を選択するFileListオブジェクトはFile object. In this case we just have one, so we select the item at position 0.

を使用して取得することもできますitem()メソッド、インデックスを指定します。

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const fileList = input.files
const theFile = fileList.item(0)
})

ただし、複数が有効になっている場合は、multiple属性（<input type="file" multiple />）、FileListには複数の要素が含まれます。

あなたは見ることによってカウントを得ることができますlengthのプロパティFileList。

この例では、アップロードされたファイルをロードし、それらを繰り返し処理して、各ファイルの名前を出力します。

<input type="file" multiple />

const input = document.querySelector('input')
input.addEventListener(‘change’, e => {
const files = input.files
const filesCount = fileList.length
for (let i = 0; i < files.length; i++) {
const file = files[i]
alert(file.name)
}
})

私の無料ダウンロードJavaScriptビギナーズハンドブック

FileListオブジェクト

FileListオブジェクトとは何かとその使用方法を確認してください

その他のブラウザチュートリアル：