質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.77%

inputで複数のファイルを取得し、横並びに表示したい。

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 204

bukiyo_binbo

score 4

前提・実現したいこと

初心者プログラマーで質問も初めてなので、文章が拙いですがご了承ください。

結論から言うと、一つのインプットに複数の画像を入力、追加したいです。
現在、フリマアプリのクローンサイトを作っています。
そのなかの出品画面にて、一つの商品に対して複数の画像を登録する画面があるのですが、1枚しか表示できず困っています。
inputで画像を選択すると、1枚は表示されます。そこから画像の追加のため、もう一度inputで画像を選択したところ、元々あった画像と置き換わってしまいます。

発生している問題

https://gyazo.com/3465360fe20c44a00b4ebd47065a2669

該当のソースコード

%main.exhibition
  .exhibition__contents
    .contents-header
      %h2 商品の情報を入力
    .up-load-box
      %h3.title-holder
        出品画像
        %span.form-require 必須
      %p 最大5枚までアップロードできます

      .up-load-box__drop-box
        %ul
          %li.upload-item
            %figure
              %img#preview
            .button
              =link_to '#', class: 'destroy' do
                削除
        %label#drop-area
          %input.drop-file-area{type: "file", multiple: 'multiple',id: "drop-upload-file", name: "image",accept: "image/*" ,}
          %pre
            ドラッグアンドドロップ 
            またはクリックしてファイルをアップロード
.exhibition{
  background-color: $white;
  width: 700px;
  margin: 0 auto;

  .infomation{
    display: inline-block;
    color: $white;
    background-color: $lightblue;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    line-height: 14px;
    font-size: 12px;
    text-align: center;
  }
  .form-require{
    margin-bottom: 8px;
    padding: 3px 5px;
    border-radius: 2px;
    color: $white;
    background-color: $red;
    font-size: 12px;
    vertical-align: top;
    font-weight: bold;
  }
  &__contents{
    .contents-header{
      border-bottom: 2px solid $lightgray;
      text-align: center;
      h2{
        padding: 32px 16px;
        font-size: 22px;
      }
    }

    .up-load-box{
      padding: 40px;
      border-bottom: 2px solid $lightgray;
      h3{
        font-size: 16px;
      }
      p{
        margin-top: 6px;
        font-size: 13px;
      }
      &__drop-box{
        margin-top: 10px;
        min-height: 162px;
        width: 100%;
        position: relative;
        display: flex;

        ul{
          top: 0;
          display: flex;
          z-index: 2;

          li.upload-item{
            background-color: darken($lightgray, 3%);
            margin-right: 2%;
            width: 116px;
            display: none;
            position: relative;
            figure{
              top: 0;
              height: 116px;
              width: 114px;
              text-align: center;
              background-color: darken($lightgray, 3%);
              img{
                top: 2px;
                height: 140px;
                width: 105px;
                transform: translate(-50%);
                position: absolute;
                object-fit: cover;
              }
            }
            .button{
              font-size: 14px;
              .destroy{
                position: absolute;
                text-align: center;
                background-color: darken($lightgray, 3%);
                display: inline-block;
                line-height: 44px;
                width: 100%;
              }
            }
          }

        }

        label{
          background-color: darken($lightgray, 3%);
          outline: 1px dashed $gray;
          position: relative;
          display: block;
          min-height: 162px;
          width: 100%; 


          input{
            display: block;
            position: absolute;
            opacity: 0;
            height: 100%;
            width: 100%;
            z-index: 5;
            cursor: pointer;
          }

          pre{
            position: absolute;
            font-size: 14px;
            text-align: center;
            line-height: 1.5;
            top: 60px;
            left: 16px;
            right: 16px;
          }
        }

      }
    }
$(function(){
  $('.drop-file-area').on('change', function(e){
    $('.upload-item').css('display','block');
    $('#drop-area').css('margin-left','2%');
  })
})

見にくい書き方になっていたらすみません;;

display:none; で消していた li 要素を 画像が選択されたら display:block; にして表示しているような状態です。
この書き方では1枚しか表示できないのでしょうか??
表示した際にだけ li の要素を出したいのですがこの方法しか浮かびませんでした...

詳しい方ご教授お願いします<(_ _)>

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.77%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る