前提・実現したいこと
画像ファイルをアップロード(複数も含む)すると、サムネイルと削除ボタンが表示されるものを、
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ファイル全て削除されてしまいます。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー