質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2119閲覧

Filereaderオブジェクトとその他の基礎的なことにつきまして

pegy

総合スコア243

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2017/08/07 13:18

編集2017/08/07 16:33

現在、ファイルを読み込みthumnailとして表示させるJavascriptを勉強しており
下記のコードにたどり着いたのですが、何点かわからない点があったため、ご教示をいただければと
投稿させていただきました。

(1)reader.onload
マニュアルを読むと、「コンテンツが読み込み完了し利用可能になると発火する load イベント時に実行されるイベントハンドラを含みます」とされておりますが、
要するにFileReaderオブジェクト(そのインスタンス)のonloadプロパティに関数を指定の関数を指定することでloadイベント時に本関数処理が実行されるということでしょうか?
また、HTMLの特定のタグにonload属性を指定することと同じことでしょうか?

(2)document.createElement('span')
上記によって生成された<span>は参考サイト通りにコーディングした場合、<input type="file"..>
の直下に生成されるのですが、特に位置を指定していないにもかかわらずなぜ、直下に生成されるのでしょうか?

(3)(f)
即時関数として末尾に()を付していると理解しているのですが、fがどこからやってきたのかが調べてもわかりません。このfは何を意味しており、なぜ必要なのかご教示頂けますでしょうか。

初心者な質問かと存じ、恐縮ではございますが、よろしくお願い申し上げます。

参照サイト

Javascript

1 2 3中略) 4var reader = new FileReader(); 5reader.onload = (function(theFile) {//(1) 6return function(e) { 7var span = document.createElement('span');//(2) 8span.innerHTML = ['<img class="thumbnail" src="', e.target.result, 9 '" title="', escape(theFile.name), '"/>'].join('') 10 document.getElementById('list').insertBefore(span, null); 11 }; 12 })(f);//(3) 13中略)

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/08/07 15:43

参照元についてはコードブロック内ではなく正しくリンクとして提示ください。teratailではマークダウンでURLにリンクを張ることができます。
pegy

2017/08/07 16:34

マークダウン方法についてtipsを見てもわからなかったのですが、hyperlinkがあったので修正をいたしました。
guest

回答2

0

(2) 「位置を指定していない」ことはないです。

JavaScript

1document.getElementById('list').insertBefore(span, null);

idがlist、つまり、output要素の子としておかれているはずです(<output id="list"></output>)。

投稿2017/08/08 01:44

x_x

総合スコア13749

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2017/08/09 11:48

ご回答ありがとうございます。 また、返信が遅くなり誠に申し訳ございません。 insertBeforeを検索して、学ぶことができました。ありがとうございます。 一点だけ不思議なのですが、マニュアルをみると要素を現在の要素の子要素として対象要素の前に挿入する とされており、span要素が挿入されているのですが、 ocument.createElement('span');//(2) span.innerHTML ・・・・・(略) とspan要素を作成しているものが、実際に子要素として加えられています。 なぜ、このspan等をidで紐付けていないにもかかわらず、createElementしたspanを挿入してくれるのでしょうか?単純にマニュアルだけ読むと普通のspan要素だけが挿入され <output id="list"><span></span></output>にしかならないと思えます。 度々恐縮ですが、よろしくお願い申し上げます。
x_x

2017/08/10 00:20

ちょっと意味が分かりません。innerHTML を知らないということでしょうか?
pegy

2017/08/10 16:36

コメントありがとうございます。 すみません、spanだけれはどのspanをid=listの子要素にするのかわからないのではと思ったのですが、このspanはタグではなくてinnerHTMLで動的にコンテンツを書き加えた後の変数としてのspanでしたね。 大変失礼いたしました。
guest

0

ベストアンサー

fがどこからやってきたのか

for (var i = 0, f; f = files[i]; i++) { ここ。

JavaScript

1 function handleFileSelect(evt) { 2 var files = evt.target.files; // FileList object 3 4 // Loop through the FileList and render image files as thumbnails. 5 for (var i = 0, f; f = files[i]; i++) { /* ここ */ 6 7 // Only process image files. 8 if (!f.type.match('image.*')) { 9 continue; 10 } 11 12 var reader = new FileReader(); 13 14 // Closure to capture the file information. 15 reader.onload = (function(theFile) { 16 return function(e) { 17 // Render thumbnail. 18 var span = document.createElement('span'); 19 span.innerHTML = ['<img class="thumb" src="', e.target.result, 20 '" title="', escape(theFile.name), '"/>'].join(''); 21 document.getElementById('list').insertBefore(span, null); 22 }; 23 })(f); 24 25 // Read in the image file as a data URL. 26 reader.readAsDataURL(f); 27 } 28 } 29 30 document.getElementById('files').addEventListener('change', handleFileSelect, false);

投稿2017/08/07 17:53

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2017/08/09 11:49

ご回答ありがとうございます。 ご返信遅くなり、誠に申し訳ございません。 すみません、見落としておりました。 これは即時関数の引数かと思いますが、引数なのに変数なんですね、、、何かオブジェクトとかを渡しているということなのでしょうか。。
pegy

2017/08/10 16:42

コメントありがとうございます。 こちらのマニュアルは拝見していたのですが、なぜ、即時関数の引数に変数を持ってくることの意味については載っておらず「即時関数 引数 オブジェクト」等で検索したも出てこなかったのです。 もう少し調べてみます。。 何れにしてもありがとうございます。
kei344

2017/08/10 16:48

for が進むたびに f の値が変わるため。即時関数でスコープを作っている。 ちなみに「引数なのに変数」はなにも変なことではありません。良くあることです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問