Question

我想将预览放在相同的div中但是多个。这是我的代码。

这是html;

    <div class="thumbnail">
             <div id="resim_view">
        <img class="image img-thumbnail" src="#"  />
        </div>
  <br />

<span class="upload-button-wrapper">
    <input class="upload-button" id="upload" type="file"/>
  <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label>
</span>
        <div class="thumbnail">
             <div id="resim_view">
        <img class="image img-thumbnail" src="<?php echo base_url(); ?>icons/resim_yok.jpg"  />
        </div>
  <br />

<span class="upload-button-wrapper">
    <input class="upload-button" id="upload" type="file"/>
  <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label>
</span>

        <div class="thumbnail">
             <div id="resim_view">
        <img class="image img-thumbnail" src="<?php echo base_url(); ?>icons/resim_yok.jpg"  />
        </div>
  <br />

<span class="upload-button-wrapper">
    <input class="upload-button" id="upload" type="file"/>
  <label class="upload-label" for="upload"><i class="glyphicon glyphicon-open"></i> &nbsp;&nbsp;Resim Yükle</label>
</span>

这是jquery代码：

  $('.upload-button').change(function(evt){
var curElement = $(this).parent().parent().find('.image'),
output =  evt.this.parentNode; 
console.log(curElement);
var reader = new FileReader();
reader.onload = function (e) {
var div = document.createElement("div");
  //  curElement.attr('src', e.target.result);
    div.innerHTML = "<img class='image img-thumbnail' src='" +  e.target.result + "'" + "/>";

output.insertBefore(div, null);

};

reader.readAsDataURL(this.files[0]);

});

但是当我尝试的方式，它只适用于第一个div，即使我添加它在第一个div显示的图像。无论如何都要在每个div预览？

Answer 1

文档中的必须唯一。
这是HTML规范的一部分;它是其行为方式的一部分。因此，您必须找到其他一些机制。

我希望预览图像在相同的ID，但在多个div

1 个答案: