Tengo un bucle en html que crea un tipo de archivo de 4 entradas y dentro de este bucle tengo una etiqueta img para obtener una vista previa de la imagen seleccionada...
<div class="gallery_imgproduct"> @for (int i = 0; i < 4; i++) { <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="form-group"> <img id="main_image_product" src="~/site/img/product/286289f713.jpg" /> <input type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control"> </div> </div> } </div>El siguiente código jQuery es solo para entrada de vista previa...
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#main_image_product') .attr('src', e.target.result) }; reader.readAsDataURL(input.files[0]); } }Quiero que la vista previa se muestre en la etiqueta img si se selecciona la imagen... Si esto es posible, por favor ayuda. Si no es así, por favor sugiera una solución. Gracias
Tiene una identificación de imagen de vista previa como "main_image_product" dentro del ciclo. La identificación debe ser única. Por lo tanto, puede sacar esa etiqueta de imagen del bucle o usar $i para crear identificadores únicos para todas las imágenes de vista previa.
<img id="main_image_product" src="~/site/img/product/286289f713.jpg" /> <div class="gallery_imgproduct"> @for (int i = 0; i < 4; i++) { <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="form-group"> <input type="file" asp-for="ProductImgName" onchange="readURL(this);" class="form-control"> </div> </div> } </div>O
<div class="gallery_imgproduct"> @for (int i = 0; i < 4; i++) { <div class="box_galleryimg col-lg-3 col-md-3 col-sm-6 col-xs-12"> <div class="form-group"> <img id="main_image_product$i" src="~/site/img/product/286289f713.jpg" /> <input type="file" asp-for="ProductImgName" onchange="readURL(this,'main_image_product$i');" class="form-control"> </div> </div> } </div> function readURL(input,imgId) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#'+imgId) .attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } }