javascript - 上传前的图像预览不适用于 + image+_row

Question

当我选择图像时，它应该预览图像。但是，当我将 var image_row 添加到 onchnage 时，它​​不起作用。

我试图让它与我的 onclick 函数一起工作 function add_popup_image()

Codepen 示例 Here

工作单号

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

不工作

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

问题:如何使 + image_row 与我的图像预览脚本一起工作

Answer 1

以下是您的问题:

image_row used to return always +1 i.e. if there existed input-popup-image1 then it retrieved input-popup-image2. For time being I just negated the value before searching for the id. You just need to take care of the increment of image_row or the below code would just work fine.

Pen Here

$('#fileupload_extra_image' + image_row).on('change',function(){
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      var imgrw=image_row-1;
      reader.onload = function (e) {
            $('#input-popup-image' + imgrw).attr('src', e.target.result);
      }
      reader.readAsDataURL(this.files[0]);
    }
});

更新

对于您在评论中提到的问题，我建议选择以下方法:

Updated Pen

为动态添加的控件image_preview和browse添加一个classname，然后获取其预览内容，该预览内容将在其根父级.行。因此，这将避免使用 id 获取并跟踪 image_row 值:

$(document).on('change','.file',function(){
    if (this.files && this.files[0]) {
        var imgpr=$(this).parents('div.row').find('.imgpr')
        var reader = new FileReader();
        reader.onload = function (e) {
            $(imgpr).attr('src', e.target.result);
        }
        reader.readAsDataURL(this.files[0]);
    }
});