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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1565閲覧

アップロードした画像をサムネイル表示す前に、id名又はファイル名を設定したい

asr1919

総合スコア16

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

アップロード

アップロードは特定のファイルをウェブサーバに送るプロセスのことを指します。

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/18 07:32

前提・実現したいこと

画像ファイルをアップロード(複数も含む)すると、サムネイルと削除ボタンが表示されるものを、
https://codeday.me/jp/qa/20190301/345419.html
を参考にして作成しました。

これに、表示された画像のタグ(img)ごとにid名(1画像ごとに違う名前)もしくは、
アップロードしたファイル名をtitle属性に設定したい。

ブラウザ:
IE、chrome

発生している問題

上記で参考にしたサイトの

javascript

1$(document).ready(function() { 2 if (window.File && window.FileList && window.FileReader) { 3 $("#files").on("change", function(e) { 4 var files = e.target.files, 5 filesLength = files.length; 6 for (var i = 0; i < filesLength; i++) { 7 var f = files[i] 8 var fileReader = new FileReader(); 9 fileReader.onload = (function(e) { 10 var file = e.target; 11 $("<span class=\"pip\">" + 12 "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + file.name + "\"/>" + 13 "<br/><span class=\"remove\">Remove image</span>" + 14 "</span>").insertAfter("#files"); 15 $(".remove").click(function(){ 16 $(this).parent(".pip").remove(); 17 }); 18 }); 19 fileReader.readAsDataURL(f); 20 } 21 }); 22 } else { 23 alert("Your browser doesn't support to File API") 24 } 25});

部分で、「class」属性の前にid名(1画像ごとに違う名前)を渡したり、
「file.name」にファイル名を渡すことは可能なのでしょうか。

過去に他の方が投稿された質問の回答
https://teratail.com/questions/12623
のやり方ではどちらも可能でしたが、
こちらの場合は、例えば3つの画像ファイルをアップロードしたとき、
3ファイルを1グループとしてサムネイル表示されるので、
削除ボタンを押下したときに3ファイル全て削除されてしまいます。

よろしくお願いします。

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

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

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

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

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

Lhankor_Mhy

2019/04/20 08:28

できると思うのですが、何か不都合がありましたか?
guest

回答1

0

自己解決

自分の場合はreadAsDataURL()を使って設定することができました。
もっと簡単な方法があるかもしれません。

取り急ぎご報告まで。

javascript

1var index = 1; 2var f = this, 3 fileName = f.name, 4 fileIndex = index, 5 reader; 6 7reader = new FileReader(); 8reader.readAsDataURL(f); 9reader.onload = (function(e) { 10 $("<span class=\"pip\">" + 11 "<img class=\"imageThumb\" src=\"" + e.target.result + "\" 12 title=\"" + file.name + "\"/>" + 13 "<br/><span class=\"remove\">Remove image</span>" + 14 "</span>").insertAfter("#files"); 15

投稿2019/04/22 06:51

asr1919

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問