Rails5.2のjqueryです。
ダイアログで選択した画像をアップロードする処理を追加しました。
ダイアログにてキャンセルした場合、キャンセルした回数分、画像が追加されてしまいます。
例えば、2回「キャンセル」をクリックして3回目で「開く」をクリックした場合、以下のようになります。
最初、turbolinksが原因かなと思いoffにしても同じでした。
キャンセル(ファイル未選択)時は、処理が走らないように思い、if (file == null)ならreturnとしましたが上手くいきませんでした。
分かる方教えて下さい。
宜しくお願い致します。
javascript
1/* global $*/ 2$(document).on('turbolinks:load', function(){ 3 4 $(document).on('click', '.image_upload', function(){ 5 6 7 //$liに追加するためのプレビュー画面のHTML。横長でないとバグる 8 let preview = $('<div class="image-preview__wapper"><img class="preview"></div><div class="image-preview_btn"><div class="image-preview_btn_edit">編集</div><div class="image-preview_btn_delete">削除</div></div>'); 9 //次の画像を読み込むためのinput。 10 let append_input = $(`<li class="input"><label class="upload-label"><div class="upload-label__text">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード<div class="input-area"><input class="hidden image_upload" type="file" multiple="multiple"></div></div></label></li>`) 11 let $ul = $('#previews') 12 let $li = $(this).parents('li'); 13 let $label = $(this).parents('.upload-label'); 14 let $inputs = $ul.find('.image_upload'); 15 16 //inputに画像を読み込んだら、"プレビューの追加"と"新しいli追加"処理が動く 17 $('.image_upload').on('change', function (e) { 18 19 //inputで選択した画像を読み込む 20 let reader = new FileReader(); 21 22 //これは駄目 23 // let file = reader.readAsDataURL(e.target.files[0]); 24 // if (file == null) 25 // { 26 // console.log("未選択につき処理を抜ける") 27 // return; 28 // } 29 30 // プレビューに追加させるために、inputから画像ファイルを読み込む。 31 reader.readAsDataURL(e.target.files[0]); 32 33 //画像ファイルが読み込んだら、処理が実行される。 34 reader.onload = function(e){ 35 //previewをappendで追加する前に、プレビューできるようにinputで選択した画像を<img>に'src'で付与させる 36 // つまり、<img>タグに画像を追加させる 37 $(preview).find('.preview').attr('src', e.target.result); 38 } 39 40 //inputの画像を付与した,previewを$liに追加。 41 $li.append(preview); 42 43 //プレビュー完了後は、inputを非表示にさせる。これによりプレビューだけが残る。 44 $label.css('display','none'); // inputを非表示 45 $li.removeClass('input'); // inputのクラスはjQueryで数を数える時に邪魔なので除去 46 $li.addClass('image-preview'); // inputのクラスからプレビュー用のクラスに変更した 47 let $lis = $ul.find('.image-preview'); // クラス変更が完了したところで、プレビューの数を数える。 48 49 $('#previews li').css({ 50 'width': '114px' 51 }) 52 53 54 55 56 57 58 59 60 }) 61 62 }) 63 64}); 65
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/09/23 02:04