質問: ['', escape(theFile.name),''].join('');//画像以外はファイル名のみの表示 } $('#preview').append($html); }; })(f); reader.readAsDataURL(f); } $(this).next('.custom-file-label').html(+ files.length + '個のファイルを選択しました'); } ``` `reader.readAsDataURL(f);`で`reader.onload`が反応して関数がイベントを受け取っているのは理解できているのですが、 そのイベントを受け取る関数に引数を渡す関数の引数である`theFile`が何者かわかりません。 `https://developer.mozilla.org/ja/docs/Web/API/FileReader` 一応上記のサイトで調べているのですが、探し方が悪いのか見つかりません。 `reader.readAsDataURL(f);`が成功し、`onload`でハンドリングされると、 必ず読み込んだファイルが格納される?`theFile`が存在するのでしょうか? 日本語的におかしいところや、認識違いによる誤った説明になっている部分もあるかと思いますが、 参考になるサイトなどございましたら教えていただけると幸いです。 ご確認よろしくお願いいたします。
回答: ``` // ↓ ここでファイルを「f」に代入 for (var i = 0, f; f = files[i]; i++) { var reader = new FileReader(); // ↓ 即時関数の仮引数 reader.onload = (function(theFile) { // ↓ 関数(onloadに入る関数)を返している return function(e) { if (theFile.type.match('image.*')) { /* 略 */ } $('#preview').append($html); }; // ↓ 即時関数の引数にファイル渡す })(f); // ↓ ここでファイルを読み込ませる reader.readAsDataURL(f); } ```