HTMLにおける、file属性（？）について

Question

MDN web docsを読んでいて、よくわからないところがあったので質問させていただきます。Webツールの作り方的なTipsで、ユーザが選択した画像のサムネイルを表示というような内容です。詳細は以下の通りです。

---

（前略）

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var imageType = /image.*/;
    
    if (!file.type.match(imageType)) {
      continue;
    }
    
    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img);
    
    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

（中略）

img 要素には obj という class が追加され、DOM ツリーから探しやすくなります。また、file という属性を設け、そこに画像の File オブジェクトを指定します。これにより、あとで実際にアップロードする画像を保持しておけるのです。最後に、 appendChild() で新しいサムネイルを文書のプレビュー領域に追加します。

URL:https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications

---

最後のほうの説明文に、「fileという属性を設け、そこに画像の云々」という記述がありますが、img要素にfileという属性があるのでしょうか？それとも、任意の属性を設定できるということなのでしょうか。

やっていることはなんとなくわかるのですが、以上のように文法的によくわからない部分があるので、お詳しい方ご教授お願い致します。

Comments

[m.ts10806]

百聞は一見に如かず。動かしてみて.fileを設定する前にimg変数をconsole.log()すれば.fileが元々あるものなのかないものなのかは分かりますが、そこは試してみられたのでしょうか。

Answer 1

file という属性を設け、そこに画像の File オブジェクトを指定します

多少不親切な説明ですね

img.file = file;

これは「属性」というよりは「プロパティ」です
属性を設定する場合は

img.setAttribute("file",file);

のような書き方が適正です。

ただ属性はユーザーが勝手に拡張すると本来の機能と競合することがあるので
できればカスタムデータを利用するのが妥当です

img.dataset["file"] = file;