使用fileReader讀取多個圖像

我試圖將圖像作爲輸入文件按鈕。選擇圖像後，默認圖像將變爲所選圖像。通過使用fileReader我只能夠定位一個圖像。使用fileReader讀取多個圖像

我怎樣才能使它只針對image attr在選定div？
這可能嗎？

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

爲什麼動態添加的圖像，對齊不相同與第一個？

謝謝

來源

2014-06-26 user3732837

在'label'標籤之後和'img'標籤之前添加空格可以解決問題。我已經更新了你的小提琴。 – rageit

是的，它顯然是可能的，你只需要遍歷在適當的層次結構中的DOM。

您需要進行兩項更改。

將change事件綁定到新動態創建的元素上。你可以簡單地通過 $(".prep").append(row);語句後添加以下代碼achive它
```
$(".inputimg").change(function() { 
      readURL(this); 
    }); 
```
在realURL()功能，你將有更具體的選擇這樣$('.img')將選擇所有的圖像標籤和不僅僅是一個靠近被點擊的對象。所以這部分可以改爲$(input).siblings('.img').attr('src', e.target.result);

看一看在Updated JSFiddle

更新1：

你對圖像的錯位最後一個問題，即，由@提到在評論中你需要在動態創建的元素中的<label>和<img>標記之間添加額外的空間，更新後的小提琴反映了這一點。

來源

2014-06-26 12:40:41 Shiva

謝謝！我嘗試使用$（this）.closest（「。img」）來定位圖像，但它不起作用。爲什麼父母>孩子只會瞄準？ :) – user3732837

@ user3732837：'.closest'實際遍歷DOM樹並嘗試查找元素。所以它會發生類似的情況，元素將檢查自身的標準，然後移動到父級並查找.img等，直到它到達DOM樹的頂部。但是你需要找到同一級別的'.img'元素。所以你也可以使用'.siblings（）'函數。 – Shiva

@ user3732837：如果答案解決了您的問題，您可以將其標記爲已接受。 :) – Shiva

使用fileReader讀取多個圖像

回答

相關問題