Question

我正在动态创建标签，并在每个标签上显示图像。然后，我允许选择一个新图像来替换它。在第一个选项卡上选择新图像后，将显示该图像（显示的原始图像将被替换）。但是，在随后的选项卡上，原始图像不会被替换（显示新图像名称）。控制台中没有错误。

因此，在我的研究中，我找到了解决方案“ $（document）.on”。我能够为日期和按钮工作（类似的问题）。但是，我无法将此用于我的图像选择。这是我的代码，也是我尝试过的：

//I have changed this:
//      $("#photo").change(function(){
//      readURL(this);
//      });

    $(document).on('change', '#photo', function(){
        readURL(this);
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#campImage').attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

    //I have tried this and it does not display the image even on the first tab:
    //      function readURL(input) {
    //          if (input.files && input.files[0]) {
    //              var reader = new FileReader();
    //              
    //              $(document).on('onload', 'reader', function(e) {
    //                  $('#campImage').attr('src', e.target.result);
    //              })
    //              
    //              reader.readAsDataURL(input.files[0]);
    //          }
    //      }

HTML：

//Column 2 to contain the image
contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="photo">Photograph:</label>';
contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8" type="file" id="photo" name="photo" placeholder="Photograph">';
contents += '<img id="campImage" src="' + obj.eventPicture + '" alt="Camp image" class="img-thumbnail">';
contents += '</div>';

Answer 1

答案是使每个“ id =”唯一。在这种情况下，id =“ photo”需要更改为“ id =”'+ obj.eventId +'“'，而” id =“ campImage”“更改为” id =“ campImage'+ obj.eventId +'”“。是表中行的主键，因此是唯一的。

代码是：

        //Column 2 to contain the image
        contents += '<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">';
        contents += '<label class="control-label control-label-left col-lg-4 col-md-4 col-sm-4 col-xs-4" for="'+obj.eventId+'">Photograph:</label>';
        contents += '<input class="form-control-file col-lg-8 col-md-8 col-sm-8 col-xs-8 photo-input" type="file" id="'+obj.eventId+'" name="photo" placeholder="Photograph">';
        contents += '<img id="campImage'+obj.eventId+'" src="' + obj.eventPicture + '" alt="Camp image" class="img-thumbnail">';
        contents += '</div>';

因此，您现在问，“ id”是否每次更改时都如何识别？好吧，在类中添加一个唯一的名称，我使用“照片输入”并使用它。因此，JS是：

    $(document).on('change', '.photo-input', function(){
        alert("this.id: " + this.id);
        readURL(this, this.id);
    });

    function readURL(input, id) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e) {
                $('#campImage'+id).attr('src', e.target.result);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }

因此，您会注意到，我为每个选项卡将id设置为唯一值。然后，我将该值附加到要填充的输入id上（图片不是这种形式的唯一图片，我保持了这种简单性）。

jQuery如何在动态加载的选项卡中显示所选图像（当前仅在第一个选项卡上有效）

1 个答案: