Question

在我的java脚本上，我可以创建一个新的表格行，然后点击img我的弹出窗口显示，我可以选择一个图像。

问题是因为如果我从文件上传中选择图像，则在创建新行时每个<img class ".number"都相同，预览图像将填充所有其他img src。

我如何才能制作我的剧本readURL()＆amp; addImage（）为<img class="">添加一个唯一的类，以便readURL()脚本函数可以拍摄该类吗？

<table id="images" class="table table-striped table-bordered table-hover">
    <thead>
        <tr>
            <td class="text-center">Image</td>
        </tr>
    </thead>
    <tbody>
        <?php $image_row = 0; ?>
        <?php $image_row++; ?>
    </tbody>
</table>

<script>

var image_row = <?php echo $image_row; ?>;

function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $("#example' + image_row + '").attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
    }
    }
    $("#file-input").change(function() {
    readURL(this);
}); 

function addImage() {
    html  = '<tr id="image-row' + image_row + '">';
    html  += '<td>';
    html  += '<img src="" class="img-thumbnail number" id="example' + image_row + '" style="width: 100px; height:100px; cursor: pointer;">';
    html  += '</td>';
    html += '</tr>';    
    $('#images tbody').append(html);
    image_row++;
}

$(document).ready(function() {
$('body').popover({
    selector: "#example' + image_row + '",
    placement: 'right',
    html: 'true',
    content: '<span class="btn btn-primary btn-file"><i class="fa fa-pencil"></i> <input onchange="readURL(this)"  id="file-input" type="file" name="userfile[]"/></span> <button  type="button" id="button-clear" class="btn btn-danger"><i class="fa fa-trash-o"></i></button>'

    });
}); 
</script>

Answer 1

在每张图片上分配唯一ID可能会更好：

function addImage() {
    var arr = [];
    if (img.img-thumbnail) {
      $('img.img-thumbnail').each(function() {
          var id = $(this).attr('id');
          arr.push(id);
      });
      var max = Math.max.apply( null, arr );
      var i = max + 1;
    } else {
      var i = 1;
    }
    html  = '<tr id="image-row' + image_row + '">';
    html  += '<td>';
    html  += '<img src="" class="img-thumbnail" id="' + i + '" style="width: 100px; height:100px; cursor: pointer;">';
    html  += '</td>';
    html += '</tr>';    
    $('#images tbody').append(html);
    image_row++;
}

然后在readURL()上选择.img-thumbnail

function readURL(input) {
    if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
    $('.img-thumbnail').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
    }
    }
    $("#file-input").change(function() {
    readURL(this);
});

Answer 2

好像你正在尝试使用id将popover放在行上？在这种情况下，更像这样的“引导”可能会让生活更轻松？尝试将这些原则应用于您的代码。

请注意图片上的data-属性。这更像是如何使用bootstrap而不是直接声明JavaScript。 template方法上甚至有一个.popover()选项可能对停止使用可能会出现XSS问题的content和html: true有用。然后，只需将id作为内容传递给您可以在readUrl函数中检索的元素。

var image_row = 0;

function readURL(input) {
  var id = $(input).parent().prevAll('span.popover-content').text()
  if (input.files && input.files[0]) {
    var reader = new FileReader();
    reader.onload = function(e) {
      $("#example" + id).attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#file-input").change(function() {
  readURL(this);
});

function addImage() {
  html = '<tr id="image-row' + image_row + '">';
  html += '<td>';
  html += '<img src="" class="img-thumbnail number" id="example' + image_row + '" style="width: 100px; height:100px; cursor: pointer;" data-container="body" data-toggle="popover" data-placement="right" data-content="' + image_row + '" />';
  html += '</td>';
  html += '</tr>';
  $('#images tbody').append(html);
  image_row++;
}

$(document).ready(function() {
  addImage();
  addImage();
  addImage();
  $('[data-toggle="popover"]').popover({
    
    template: '<div class="popover" role="tooltip"><span class="popover-content" style="display:none;"></span><span class="btn btn-primary btn-file"><i class="fa fa-pencil"></i> <input onchange="readURL(this)" id="file-input" type="file" name="userfile[]" /></span> <button type="button" id="button-clear" class="btn btn-danger"><i class="fa fa-trash-o"></i></button></div>'
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<table id="images" class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <td class="text-center">Image</td>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript为每个图像创建唯一的类

2 个答案: