【HTML】inputタグのfileでユーザーがアップロードしたファイル情報取得

HTML構造

inputタグのfileタイプのhtmlにユーザーが画像アップロード

<input id="uploader" name="fileupload" type="file" />

アップロードしたファイル情報取得

type=fileのinputタグのElementの中のfilesプロパティで取得する

const upload_image = document.getElementById("uploader")
var Fileinput = upload_image.files
console.log(Fileinput)

<input id="uploader" name="fileupload" type="file" accept="image/png, image/jpeg" />

.filesプロパティで返ってくるのはFileListという独自オブジェクト
こいつが結構めんどくさかった

FileListの構造

●FileListに関するMDNのドキュメントは下記リンク参照
https://developer.mozilla.org/ja/docs/Web/API/FileList
（つーかこっち見た方が早い。。。）

FileListの構造は以下の通り
アップロードしたファイルごとに0,1,2...のようにインデックスが付与
最後にファイルの数を表すlengthプロパティが保持

FileList {
  0: File { name: "file1.jpg", size: ..., type: "image/jpeg", ... },
  1: File { name: "file2.png", size: ..., type: "image/png", ... },
  2: File { name: "file3.pdf", size: ..., type: "application/pdf", ... },
  length: 3
}

例えば、1番目のファイルにアクセスするときは下記

const first_file = upload_image.files[0]
const size = first_file.size //サイズ確認

アップロードされたファイル数を取得する場合は下記

const length = upload_image.files.length

具体的な処理

⭐ユーザーがアップロードしたファイルをforで処理

for (var i = 0; i < files.length; i++) {
 //処理
}

⭐ユーザーがファイルをアップロードしているか検知

        var upload_image = document.getElementById("uploader")
        upload_image.addEventListener("change", (e) => {
            var Fileinput = upload_image.files
            console.log(Fileinput)
            console.log(Fileinput.length)

            if (Fileinput.length >= 1){
             // 処理
            }
         }

↑ アップロードするとlengthが１になり、ファイルサイズ・ファイル名も取得かのう