Załaduj obraz w tagu img

Question

Wesołych Świąt dla wszystkich.

Mam 4 sekcje, każdy zawiera pusty tag img. Podczas przesyłania obrazu musi pasować do odpowiedniej sekcji.

Po kliknięciu przycisku "Dodaj obraz w sekcji 1" i przesłaniu obrazu, należy go poprawić w obrazie 1 element div, podobnie jak wszystkie cztery. Ale kiedy wstawię funkcję kliknięcia w moim kodzie, to nie działa.

Co za mój błąd tutaj.

<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> 

Herezje mój skrypt

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

Zrobiłem JSBIN dla łatwiejszego zrozumienia havn't dodał kliknięcie i starał się dodać tę funkcję, a następnie cały skrypt nie działa

Answer 1

Nadaj sekcjom obrazu klasę lub umieść je w kontenerze, aby łatwiej było obsłużyć detektory zdarzeń .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> 

Następnie kliknąć na poniższy skrypt do wyświetlania przesłanego obrazu do klasy [w tym przypadku klasy activeImage], a następnie związać słuchaczy do przycisków, które przełącza „aktywny” pojemnik

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

Spróbuj z tym: 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(); 
}); 
});​