前提・実現したいこと
https://codeday.me/jp/qa/20190301/345419.html
上記のサイトを元に、画像をアップロードして表示させましたが、「Remove image」を押下すると、
javascript
1$(this).parent(".pip").remove();
の処理が複数回実行(表示されている画像分だけ?)されてしまいます。
この行の下に処理を追加したいのですが、複数回実行されると値の増減などを行ったときに意図しない数値になるため、
1回に留めたいのですが、可能でしょうか。
よろしくお願いします。
環境:ローカル環境内で実行
ブラウザ:IE11、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 // Old code here 20 /*$("<img></img>", { 21 class: "imageThumb", 22 src: e.target.result, 23 title: file.name + " | Click to remove" 24 }).insertAfter("#files").click(function(){$(this).remove();});*/ 25 26 }); 27 fileReader.readAsDataURL(f); 28 } 29 }); 30 } else { 31 alert("Your browser doesn't support to File API") 32 } 33});
html
1<div class="field" align="left"> 2 <h3>Upload your images</h3> 3 <input type="file" id="files" name="files[]" multiple /> 4</div>
css
1input[type="file"] { 2 display: block; 3} 4.imageThumb { 5 max-height: 75px; 6 border: 2px solid; 7 padding: 1px; 8 cursor: pointer; 9} 10.pip { 11 display: inline-block; 12 margin: 10px 10px 0 0; 13} 14.remove { 15 display: block; 16 background: #444; 17 border: 1px solid black; 18 color: white; 19 text-align: center; 20 cursor: pointer; 21} 22.remove:hover { 23 background: white; 24 color: black; 25}
試したこと
on('click', function())に変えたり、return falseや$('input[type=file]').val('');によるクリアなどは試みましたがダメでした。
回答2件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2019/04/22 09:01 編集