使用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演示

• 為什么動態添加的圖像的對齊方式與第一個不同？

謝謝

Answer 1

是的，很可能您只需要在適當的層次結構中遍歷DOM。

您需要進行兩項更改。

1. 也將更改事件綁定到新動態創建的元素。 您可以通過在$(".prep").append(row);之后添加以下代碼來簡單地實現它$(".prep").append(row); 聲明

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

2. 在realURL()函數中，您將必須更加具體，因為像這樣的$('.img')選擇將選擇所有圖像標簽，而不僅僅是選中對象的標簽。 因此該部分可以更改為$(input).siblings('.img').attr('src', e.target.result);

看看更新的JSFiddle

更新1：

對於最后一個問題，即有關圖像未對齊的問題，如@rageit在評論中所提到的，您需要在動態創建的元素的<label>和<img>標記之間添加一個額外的空格，更新的小提琴反映了這一點。