input type file 画像 表示

Question

アップロードする画像をこのボタン上に表示したいです。

<div class="area_gallery_edit">
  <p class="ttl">部屋画像</p>
  <ul class="list_gallery_edit">
    <li id="gallery1">
      <article>
        <div class="btn_add_gallery" id="add_gallery">
          <div class="wrap_input">
            <div class="wrap_file">
              <?= $this->Form->input('pictures.0.file_path', ["type" => "file", "label" => false, "accept" => "image/*"]); ?>
              <label style="background: url()"></label>
            </div>
            <a class="btn_delete" id="delete" name="gallery"></a>
          </div>
        </div>
      </article>
    </li>
  </ul>
</div>

<script>
  $('.btn_add_gallery input[type="file"]').on('change', function () {
    var This = $(this);
    var file = $(this).prop('files')[0];
    // 画像表示
    var reader = new FileReader();
    reader.onload = function() {
      This.next().attr('style', 'background: url('+reader.result+')');
      This.parent().addClass('check');
      This.parents('.list_gallery_edit').find('li:last-of-type .wrap_file').removeClass('check');
      This.parents('.list_gallery_edit').find('li:last-of-type label').attr('style','');
    }
    reader.readAsDataURL(file);
  });
</script>

上記が現在のコードです。
どなたかご教示頂けますと幸いです。

---

修正

+ボタンでアップロードするファイルを選ぶのですが
上記の画像の様にimgを表示したいです。

---

修正

<div class="area_gallery_edit">
  <p class="ttl">部屋画像</p>
  <ul class="list_gallery_edit">
    <li id="gallery1">
      <article>
        <div class="btn_add_gallery" id="add_gallery">
          <div class="wrap_input">
            <div class="wrap_file">
              <div class="input file"><input type="file" name="pictures[0][file_path]" accept="image/*" id="pictures-0-file-path"></div>
              <label style="background: url()"></label>
            </div>
            <a class="btn_delete" id="delete" name="gallery"></a>
          </div>
        </div>
      </article>
    </li>
  </ul>
</div>

---

追記

画像のサイズがこのようになります。

Comments

[yambejp]

> ボタン上に表示

ちょっと状況わからないです
サムネイル？それともそのままの画像をimgで表示してよいのでしょうか？
HTML上にtype=fileのUIがないですが、サーバー上の画像なのですか？

[yambejp]

PHPでformの情報をかいているのですね？
再現性がたもてないので、すべてHTMLで書き起こしてください
（ソースを見るで表示すればブラウザで確認できるはず）

[退会済みユーザー]

かしこまりました。htmlで書き起こしました。

Answer 1

<script>
$(function(){
  $('.btn_add_gallery input[type=file]').on('change', function () {
    var self=$(this);
    var file = $(this).prop('files')[0];
    var reader = new FileReader();
    reader.addEventListener('load',e=>{
      var binary=String.fromCharCode.apply("",new Uint8Array(e.target.result));
      var base64="data:"+file.type+";base64,"+btoa(binary);
      self.before($('<img>').attr({src:base64}).css({"max-width":100,"max-height":100}));
    });
    reader.readAsArrayBuffer(file);
  });
});
</script>
<div class="area_gallery_edit">
  <p class="ttl">部屋画像</p>
  <ul class="list_gallery_edit">
    <li id="gallery1">
      <article>
        <div class="btn_add_gallery" id="add_gallery">
          <div class="wrap_input">
            <div class="wrap_file">
              <div class="input file"><input type="file" name="pictures[0][file_path]" accept="image/*" id="pictures-0-file-path"></div>
              <label style="background: url()"></label>
            </div>
            <a class="btn_delete" id="delete" name="gallery"></a>
          </div>
        </div>
      </article>
    </li>
  </ul>
</div>

Comments

[退会済みユーザー]

ありがとうございます！表示されました。画像のサイズを整えたいので、追記させていただいてもよろしいでしょうか。

[yambejp]

> 画像のサイズを整えたい

画像はリサイズしておらず表示上のサイズだけ調整してあります

見た感じ表示枠があるので、その表示枠の縦横サイズを、
css()で指定するmax-width,max-heightに適用してください

[退会済みユーザー]

かしこまりました。ありがとうございました。

Answer 2

  $('.btn_add_gallery input[type="file"]').on('change', function (e) {
    var This = $(this);
    var file = $(this).prop('files')[0];
    // 画像表示
    var reader = new FileReader();
    reader.onload = function(e) {
      This.next().attr('style', 'background: url('+e.target.result+')');
      This.parent().addClass('check');
      This.parents('.list_gallery_edit').find('li:last-of-type .wrap_file').removeClass('check');
      This.parents('.list_gallery_edit').find('li:last-of-type label').attr('style','');
    }
    reader.readAsDataURL(e.target.files[0]);
  });