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ビギナーズハンドブック


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