Javascript 使用fileReader读取多个图像

我正在尝试将图像作为输入文件按钮。选择图像后，默认图像将更改为所选图像。 通过使用

文件阅读器

我只能瞄准一个图像

• 如何使其仅针对所选

  div

  中的

  图像

  attr
• 可能吗

HTML代码

<div class="prep">
<div class="row">
    <label>Step 1</label>
    <img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ >
    <input type="file" class="inputimg" />
</div>
</div>
    <span class="add">Add Step</span>

第一步
添加步骤

JS代码。

$(document).on("click" ,".img" , function(){

$(this).closest("div").find(".inputimg").trigger("click");
});

var count = 1;
$(".add").on("click",function(){
    count ++;
var row = '<div class="row"><label>Step '+count+'</label><img src="http://png-4.findicons.com/files/icons/129/soft_scraps/256/button_upload_01.png" id="upfile1" style="cursor:pointer" class="img"/ ><input type="file" class="inputimg" />';
$(".prep").append(row);
});
    $(".inputimg").change(function(){
        readURL(this);
    });

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

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

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

$（document）.on（“click”，“.img”，function（））{
$（this）.closest（“div”）.find（“inputimg”）.trigger（“click”）；
});
var计数=1；
$（“.add”）。在（“单击”，函数（）{
计数++；
变量行='步骤'+计数+''；
$（“.prep”）.append（行）；
});
$（“.inputimg”）.change（函数（）{
readURL（this）；
});
函数readURL（输入）{
if（input.files&&input.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
$（'.img'）.attr（'src'，e.target.result）；
}
reader.readAsDataURL（input.files[0]）；
}
}

参考我的

• 为什么动态添加的图像，对齐方式与第一个不一样

---

谢谢

是的，很明显，您只需在适当的层次结构中遍历DOM即可

你需要做两个改变

将变更事件也绑定到新动态创建的元素。 您只需在

$（“.prep”）.append（行）语句

    $(".inputimg").change(function () {
             readURL(this);
    });

在

realURL（）

函数中，您必须更具体地 像这样选择

$（'.img'）

将选择所有图像标记和 不仅仅是单击对象附近的对象。所以那部分可以 已更改为

$（输入）.sibbines（'.img'）.attr（'src'），
e、 目标（结果）

看一看这本书

更新1:

---

对于您的最后一个问题，即关于图像未对齐的问题，@rageit在评论中提到，您需要在动态创建的元素中的

和

标记之间添加一个额外的空间，更新的小提琴反映了这一点

在

标签

标记后和

img

标记前添加空格可解决问题。我更新了你的小提琴，谢谢！我尝试使用$（this.nexist（“.img”）来定位图像，但它不起作用。为什么父对象>子对象它将只针对子对象？：）@user3732837:

.closest

实际上遍历DOM树并尝试查找元素。因此会发生类似这样的情况，元素将检查自身的条件，然后移动到父元素并查找for.img，等等，直到它到达DOM树的顶部。但是您需要找到位于同一级别的

.img

元素。所以你也可以使用

.sibbins（）

函数。@Shiva你在吗？@bc110402307SyedZeeshanHaide:是的。@Shiva我想问一下我们如何限制你小提琴的步数？意味着如果我想将用户限制到最大步骤5，该怎么办。在进一步单击时，用户将发现一个对话框，说明您只能创建5个步骤。希望你明白我的意思。。我会投你一票