將圖片上傳到圖片標籤

Question

祝大家聖誕快樂。

我有4個部分，每個部分都包含一個空的img標籤。在上傳圖片時，它必須適合相應的部分。

當我點擊「在第1部分添加圖片」並上傳圖片時，它必須在Image_1 div中修復，就像明智的所有四個一樣。但是，當我插入點擊功能在我的代碼它不工作。

這是什麼我的錯誤。

<div class="pre_img" > 
    <span> 
    <img class="prw_img" src="http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt="your image" /> 
    </span> 
</div> 

<input id="file" type="file" name="files[]" onChange="readURL(this);" /> 

<div id="Image_1"> 
    <button> AddImage to section 1</button> 
    <img id="img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_2"> 
    <button> AddImage to section 2</button> 
    <img id="img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_3"> 
    <button> AddImage to section 3</button> 
    <img id="img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

<div id="Image_4"> 
    <button> AddImage to section 4</button> 
    <img id="img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc"/> 
</div> 

繼承人我的腳本

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

      reader.onload = function (e) { 
       $('.prw_img,#img_1').attr('src', e.target.result).width(112).height(112); 
       $('#img_1').css('display','inline'); 
      }; 
      reader.readAsDataURL(input.files[0]); 
    } 
} 

我已經做了JSBIN爲了便於理解，我 加沒有帶一個點擊嘗試添加該功能，那麼整個腳本不工作

Answer 1

爲圖像部分提供一個類，或將它們包含在容器中以使事件偵聽器更容易處理

HTML：

<div class="pre_img"> 
    <span><img class="prw_img" src= 
    "http://www.iconshock.com/img_jpg/REALVISTA/general/jpg/128/preview_icon.jpg" alt= 
    "your image"></span> 
    </div> 

    <form> 
    <input id="file" type="file" name="files[]" onchange="readURL(this);"> 
    </form> 

    <div id="Image_1" class="imageSection"><button>AddImage to section 1</button> <img id= 
    "img_1" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_1"></div> 

    <div id="Image_2" class="imageSection"><button>AddImage to section 2</button> <img id= 
    "img_2" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_2"></div> 

    <div id="Image_3" class="imageSection"><button>AddImage to section 3</button> <img id= 
    "img_3" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_3"></div> 

    <div id="Image_4" class="imageSection"><button>AddImage to section 4</button> <img id= 
    "img_4" alt="" width="100px" height="100px" style="Border 1px solid #ccc" name= 
    "img_4"></div> 

然後使用下面的腳本來顯示上傳的圖像的一類[在這種情況下，activeImage類]，以及聽衆結合到切換「活動」容器的按鈕

JS：

$(".imageSection button").click(function() { 
    $(".imageSection img").removeClass("activeImage"); 
    $(this).parent().find("img").addClass("activeImage"); 
}); 
$(".imageSection:eq(0) img").addClass("activeImage"); 

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

     reader.onload = function(e) { 
      $('.prw_img,.activeImage').attr('src', e.target.result).width(112).height(112); 

      $('.activeImage').css('display', 'inline'); 
     }; 

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

JsBin：http://jsbin.com/imonub/8/edit

Answer 2

試試這個：http://jsbin.com/imonub/7/edit

var id = '1'; // set default id for first img tag 


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

    reader.onload = function(e) { 
     $('.prw_img').attr('src', e.target.result).width(112).height(112); 

     $('#img_' + id).attr('src', e.target.result).width(112).height(112); 
     $('#img_' + id).css('display', 'inline'); 
    }; 

    reader.readAsDataURL(input.files[0]); 
} 
} 
$(document).ready(function() { 
$('button').click(function() { 
    id = $(this).html().replace('AddImage to section', '').trim(); 
}); 
});​