javascript - 使用 fileReader 读取多张图像

Question

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

• 如何才能使其仅针对所选 div 中的 image 属性？
• 这可能吗？

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]);
        }
    }

引用我的jsfiddle Demo

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

谢谢

Answer 1

是的，显然您只需要在正确的层次结构中遍历 DOM 即可。

您需要进行两项更改。

1. 将更改事件也绑定(bind)到新动态创建的元素。您可以通过在后面添加以下代码来简单地实现它 $(".prep").append(row);声明

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

2. 在 realURL()函数你必须更具体为像这样选择$('.img')将选择所有图像标签并不仅仅是靠近被单击对象的那个。所以那部分可以是更改为$(input).siblings('.img').attr('src',
e.target.result);

看看 Updated JSFiddle

更新 1:

对于你的最后一个问题，即关于图像未对齐的问题，正如 @rageit 在评论中提到的，你需要在 <label> 之间添加一个额外的空格。和<img>动态创建的元素中的标签，更新的 fiddle 反射(reflect)了这一点。