前提・実現したいこと
初心者プログラマーで質問も初めてなので、文章が拙いですがご了承ください。
結論から言うと、一つのインプットに複数の画像を入力、追加したいです。
現在、フリマアプリのクローンサイトを作っています。
そのなかの出品画面にて、一つの商品に対して複数の画像を登録する画面があるのですが、1枚しか表示できず困っています。
inputで画像を選択すると、1枚は表示されます。そこから画像の追加のため、もう一度inputで画像を選択したところ、元々あった画像と置き換わってしまいます。
発生している問題
https://gyazo.com/3465360fe20c44a00b4ebd47065a2669
該当のソースコード
haml
1%main.exhibition 2 .exhibition__contents 3 .contents-header 4 %h2 商品の情報を入力 5 .up-load-box 6 %h3.title-holder 7 出品画像 8 %span.form-require 必須 9 %p 最大5枚までアップロードできます 10 11 .up-load-box__drop-box 12 %ul 13 %li.upload-item 14 %figure 15 %img#preview 16 .button 17 =link_to '#', class: 'destroy' do 18 削除 19 %label#drop-area 20 %input.drop-file-area{type: "file", multiple: 'multiple',id: "drop-upload-file", name: "image",accept: "image/*" ,} 21 %pre 22 ドラッグアンドドロップ 23 またはクリックしてファイルをアップロード
scss
1.exhibition{ 2 background-color: $white; 3 width: 700px; 4 margin: 0 auto; 5 6 .infomation{ 7 display: inline-block; 8 color: $white; 9 background-color: $lightblue; 10 border-radius: 50%; 11 height: 14px; 12 width: 14px; 13 line-height: 14px; 14 font-size: 12px; 15 text-align: center; 16 } 17 .form-require{ 18 margin-bottom: 8px; 19 padding: 3px 5px; 20 border-radius: 2px; 21 color: $white; 22 background-color: $red; 23 font-size: 12px; 24 vertical-align: top; 25 font-weight: bold; 26 } 27 &__contents{ 28 .contents-header{ 29 border-bottom: 2px solid $lightgray; 30 text-align: center; 31 h2{ 32 padding: 32px 16px; 33 font-size: 22px; 34 } 35 } 36 37 .up-load-box{ 38 padding: 40px; 39 border-bottom: 2px solid $lightgray; 40 h3{ 41 font-size: 16px; 42 } 43 p{ 44 margin-top: 6px; 45 font-size: 13px; 46 } 47 &__drop-box{ 48 margin-top: 10px; 49 min-height: 162px; 50 width: 100%; 51 position: relative; 52 display: flex; 53 54 ul{ 55 top: 0; 56 display: flex; 57 z-index: 2; 58 59 li.upload-item{ 60 background-color: darken($lightgray, 3%); 61 margin-right: 2%; 62 width: 116px; 63 display: none; 64 position: relative; 65 figure{ 66 top: 0; 67 height: 116px; 68 width: 114px; 69 text-align: center; 70 background-color: darken($lightgray, 3%); 71 img{ 72 top: 2px; 73 height: 140px; 74 width: 105px; 75 transform: translate(-50%); 76 position: absolute; 77 object-fit: cover; 78 } 79 } 80 .button{ 81 font-size: 14px; 82 .destroy{ 83 position: absolute; 84 text-align: center; 85 background-color: darken($lightgray, 3%); 86 display: inline-block; 87 line-height: 44px; 88 width: 100%; 89 } 90 } 91 } 92 93 } 94 95 label{ 96 background-color: darken($lightgray, 3%); 97 outline: 1px dashed $gray; 98 position: relative; 99 display: block; 100 min-height: 162px; 101 width: 100%; 102 103 104 input{ 105 display: block; 106 position: absolute; 107 opacity: 0; 108 height: 100%; 109 width: 100%; 110 z-index: 5; 111 cursor: pointer; 112 } 113 114 pre{ 115 position: absolute; 116 font-size: 14px; 117 text-align: center; 118 line-height: 1.5; 119 top: 60px; 120 left: 16px; 121 right: 16px; 122 } 123 } 124 125 } 126 }
Jquery
1$(function(){ 2 $('.drop-file-area').on('change', function(e){ 3 $('.upload-item').css('display','block'); 4 $('#drop-area').css('margin-left','2%'); 5 }) 6})
見にくい書き方になっていたらすみません;;
display:none; で消していた li 要素を 画像が選択されたら display:block; にして表示しているような状態です。
この書き方では1枚しか表示できないのでしょうか??
表示した際にだけ li の要素を出したいのですがこの方法しか浮かびませんでした...
詳しい方ご教授お願いします<(_ _)>
あなたの回答
tips
プレビュー