jsで複数画像のファイル名、画像の表示
解決済
回答 1
投稿
- 評価
- クリップ 1
- VIEW 2,498
jsで複数画像を表示する方法について質問です。
input type=file でファイルを選択された時に下記の処理が動くようにして選択画像を表示させています。
イメージは選択された画像の分だけファイル名、画像というように並べていきたいです。
下記の処理を行うと画像とファイル名が表示されます。
ただし、ファイル名が全て最後に選択した画像のファイル名となってしまいます。
足りない情報があれば追記します。
宜しくお願いします。
// userfileは選択されたファイルオブジェクトのIDです
var files = document.getElementById('userfile').files;
for (var i = 0; i < len; i++) {
var file = files[i];
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'></div></div>';
$('#preview').append(img);
}
fr.readAsDataURL(file);
}
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
checkベストアンサー
+2
forループ内で非同期な関数を定義して実行するとループが先に終了し、後から非同期で関数が呼ばれるためです。
なので、for文で囲ってる内容を別の関数に定義して、その関数を呼ぶか、クロージャーを使うかのいずれかの方法をとる必要があります。
// 別関数を定義して呼ぶ
for(var i = 0; i < len; i++ ) {
fileLoad(files[i]);
}
function fileLoad(file) {
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>';
$('#preview').append(img);
}
fr.readAsDataURL(file);
}// クロージャーを使用する
for(var i = 0; i < len; i++ ) {
(function() {
var j = i; // いったん変数をクロージャー内で再定義させる。
var file = files[j];
var fr = new FileReader();
fr.onload = function(e) {
var src = e.target.result;
var img = '<div><div>' + file.name + '</div><div><div><img src="'+ src +'"></div></div>';
$('#preview').append(img);
}
fr.readAsDataURL(file);
})();
}てか、そもそもとして、もしレガシーブラウザーは対象にしていないというのでしたら、
for(var i = 0; i < len; i++) {
var fnm = files[i].name;
var src = URL.createObjectURL(files[i]);
var img = '<div><div>' + fnm + '</div><div><div><img src="'+ src +'"></div></div>';
$('#preview').append(img);
}
で行けると思います。
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
質問への追記・修正、ベストアンサー選択の依頼
kei344
2017/01/18 16:48
質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。