Java 脚本为每个映像创建唯一的类

Java Script Create Unique Class For Each Image

本文关键字：创建 唯一 映像 脚本 Java      更新时间：2023-09-26

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

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

我如何能够让我的脚本readURL()和addImage（）添加一个唯一的类来<img class="">以便readURL()脚本函数可以pic该类？

<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>
您似乎

正在尝试使用 id 将弹出框放置在行上？在这种情况下，像这样更"自力更生"的东西可能会让生活更轻松？尝试将这些原则应用于代码。

请注意图像上的data-属性。这更像是引导程序的使用方式，而不是直接声明JavaScript。.popover()方法上甚至还有一个template选项，可用于停止使用可能存在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>

最好

为每个图像分配一个唯一的 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);
});
相关文章：