Carica immagine in un tag img

Question

Buon Natale a tutti.

Ho 4 sezioni ciascuna contiene un tag img vuoto. Durante il caricamento di un'immagine deve essere inserita nella sezione corrispondente.

Quando faccio clic su "Aggiungi immagine nella sezione 1" e carica l'immagine che deve risolvere in Image_1 div come tutti i quattro. Ma quando inserisco la funzione click nel mio codice non funziona.

Che cosa è il mio errore qui.

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

Heres il mio script

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

Ho fatto un JSBIN per una facile comprensione havn't aggiunto un click e ho cercato di aggiungere che la funzione quindi l'intero script non funziona

Answer 1

Assegna una sezione alle sezioni dell'immagine o includile in un contenitore per semplificare la gestione degli ascoltatori

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> 

quindi utilizzare il seguente script per visualizzare l'immagine caricata a una classe [in questo caso, la classe activeImage], e legare gli ascoltatori ai pulsanti, che alterna il contenitore "attivo"

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

prova con questo: 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(); 
}); 
});​