estoy haciendo un peque;o blog donde se puedan llegar a subir varias imagenes en una misma entrada, en el formulario lo que hice fue agregar un div y con js agregar funcinoes para que tome la foto y las previsualice, en si funciona perfectamente, pero solo cuando se agrega un Id, no una clase, debido a que lo que quiero es agregar varios div con imagenes de previsualizacion, y obvio no puedo hacerlo ya que no es posible agregar varios Id en un mismo HTML, como podria solucionar el codigo para que funcione de manera correcta
este es el div que contendra la imagen
<div class="photo">
<label for="foto">Foto:</label>
<div class="prevPhoto">
<span class="delPhoto notBlock">X</span>
<label for="foto"></label>
</div>
<div class="upimg">
<input type="file" name="foto" id="foto">
</div>
<div id="form_alert"></div>
</div>
Y este es el codigo JS
$(document).ready(function(){
//--------------------- SELECCIONAR FOTO ENTRADAS ---------------------
$("#foto").on("change",function(){
var uploadFoto = document.getElementById("foto").value;
var foto = document.getElementById("foto").files;
var nav = window.URL || window.webkitURL;
var contactAlert = document.getElementById('form_alert');
if(uploadFoto !='')
{
var type = foto[0].type;
var name = foto[0].name;
if(type != 'image/jpeg' && type != 'image/jpg' && type != 'image/png')
{
contactAlert.innerHTML = '<p class="errorArchivo">El archivo no es válido.</p>';
$("#img").remove();
$(".delPhoto").addClass('notBlock');
$('#foto').val('');
return false;
}else{
contactAlert.innerHTML='';
$("#img").remove();
$(".delPhoto").removeClass('notBlock');
var objeto_url = nav.createObjectURL(this.files[0]);
$(".prevPhoto").append("<img id='img' src="+objeto_url+">");
$(".upimg label").remove();
}
}else{
alert("No selecciono foto");
$("#img").remove();
}
});
$('.delPhoto').click(function(){
$('#foto').val('');
$(".delPhoto").addClass('notBlock');
$("#img").remove();
});
});
La pregunta seria como modificar el div y el js para que pueda tomar varios div con la previsualizacion sin necesidad de repetir un JS para cada uno con una ID distinta