HTMLとjQueryで開を行なっています。
前回、質問した箇所と同じになるのですが、今回は後付けで生成し、分裂したスペースと一緒に画像をプレビュー表示しようとしています。
連続して同じ画像を選ばなければ、スペースが分裂してプレビュー表示されるのですが、連続して同じ画像を選ぼうとするとプレビューが表示されない(1回目に選んだ画像は2回目では選択しても何の変化もないが、2回目に別の画像を選んだ時に、3回目では1回目と同じ画像を選ぶことができる)、また画像プレビューが成功して一つ目のスペースが生成され分裂した後に、画像ファイルから選択せずにキャンセルを押すと、プレビューがないにも関わらず二つ目のスペースが生成され、分裂してしまいます。
様々な箇所のクラス名やid名を変えてみましたが、何も変わらない状態です。
こうなってしまう原因と解決法をご教授いただければ幸いです。
よろしくお願いします。
html
1<div class="sell-dropbox-container clearfix"> 2 <div class="sell-upload-items have-item", id="items"> 3 <ul> 4 </ul> 5 </div> 6 <div class="sell-upload-drop-box have-item", id="dropbox"> 7 <img class="m-preview"> 8 <%= fields_for(@item) do |f| %> 9 <input type="file" class="sell-upload-drop-file" multiple="" 10 name="image1" style="display: none;"> 11 <%= f.file_field :image %> 12 <pre class="visible-pc"></pre> 13 <% end %> 14 </div> 15</div>
jQuery
1$(function(){ 2 3 function buildIMAGE1(){ 4 var html = ` <li class="sell-upload-item"> 5 <figure class="sell-upload-figure figure-1"> 6 <img> 7 </figure> 8 <div class="sell-upload-button"> 9 <a href="" class="sell-upload-edit">編集</a> 10 <a id="delete" >削除</a> 11 </div> 12 </li>` 13 return html; 14 } 15 16 function buildIMAGE2(){ 17 var html = ` <li class="sell-upload-item"> 18 <figure class="sell-upload-figure figure-2"> 19 <img> 20 </figure> 21 <div class="sell-upload-button"> 22 <a href="" class="sell-upload-edit">編集</a> 23 <a id="delete" >削除</a> 24 </div> 25 </li>` 26 return html; 27 } 28 29 30 //画像アップロード 31 $(document).on("change", ".have-item", function(e){ 32 // 1分割 33 $("#items").removeClass("have-item").addClass("have-item-1") 34 $("#dropbox").removeClass("have-item").addClass("have-item-1") 35 var html = buildIMAGE1() 36 $("#item").append(html) 37 var file = e.target.files[0]; 38 var reader = new FileReader(); 39 var IdentifiedImg = $(".figure-1").children("img"); 40 41 reader.onload = (function(file){ 42 return function(e){ 43 IdentifiedImg.attr("src", e.target.result); 44 IdentifiedImg.attr("title", file.name); 45 }; 46 }) (file); 47 reader.readAsDataURL(file); 48 49 // 2分割 50 $(document).on("change", ".have-item-1", function(e){ 51 $("#items").removeClass("have-item-1").addClass("have-item-2") 52 $("#dropbox").removeClass("have-item-1").addClass("have-item-2") 53 var html = buildIMAGE2() 54 $("#item").append(html) 55 var file = e.target.files[0]; 56 var reader = new FileReader(); 57 var IdentifiedImg = $(".figure-2").children("img"); 58 reader.onload = (function(file){ 59 return function(e){ 60 IdentifiedImg.attr("src", e.target.result); 61 IdentifiedImg.attr("title", file.name); 62 }; 63 })(file); 64 reader.readAsDataURL(file); 65}) 66 67
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。