0

Necesito ayuda, estoy creando una galería de imágenes y quiero pre-visualizar la imagen pero me sale un error de que no carga la imagen, este es el error que me sale:

error que muestra la consola del navegador

No se si de pronto no es la forma correcta de cargar la imagen.

<div class="custom-file">
    <input type="file" class="custom-file-input" id="new_image" aria-describedby="inputGroupFileAddon01">
   <label class="custom-file-label" for="inputGroupFile01">Image</label>
  </div>


function save_image(){
    if($("#new_image").val()!="" && $("#title_img").val()!="" && $("#_url").val()!=""  && $('select[id=category]').val()!="Choose.."){
        
        var _img=document.getElementById("new_image").files[0].name; 
        var _title=$("#title_img").val();
        var _url=$("#_url").val();
        var _category=$('select[id=category]').val();
        console.log('entro');
        createPreview(_img,_title,_url,_category);
    }else{
        $('#alert_check').show()
        setTimeout(function () {
             $('#alert_check').hide();
            }, 3000);
        ;
    }
}

function createPreview(img,title,url,category){

    console.log(img);
    console.log(title);
    console.log(url);
    console.log(category);

    var new_img=$('<div class="box ' + category + '"><a href="'+url+'" target="_blank"><img src="'+img+'" alt="'+category+'"></a><div class="tit"><h3>'+title+'</h3></div></div>');
     $(new_img).insertBefore("#first_photo");
}
6
  • Puedes agregar el codigo HTML adicional que se referencia en el codigo #url y #title_img. Como obtienes el valor de #url?
    – F.Igor
    Commented el 10 sept. 2020 a las 19:47
  • 1
    Al parecer estas tratando de cargar una imagen con una URL de sistema de archivos local file://. Si las imagenes se cargan solo con el <input type=file> no necesitas incluir una URL, se puede obtener del archivo cargado.
    – F.Igor
    Commented el 10 sept. 2020 a las 19:51
  • Por razones de seguridad, los navegadores bloquearán acceso a la imagen por su ruta en disco, necesitas usar fileReader, aquí un ejemplo: stackoverflow.com/questions/4459379/…
    – Triby
    Commented el 10 sept. 2020 a las 20:21
  • Hola! lo de la url es porque necesito incluir un link en mi html Commented el 10 sept. 2020 a las 20:40
  • ¿Qué es lo que haces posteriormente con la imagen y el enlace? Porque no creo que te sean de utilidad si no guardas los datos (e imagen) primero.
    – Triby
    Commented el 10 sept. 2020 a las 22:04

1 respuesta 1

0

Al igual que los compañeros estoy confundido respecto a qué valor tiene $("#_url"). Sin embargo, si solo te interesa mostrar una vista previa de la imagen que el usuario acaba de cargar, lo puedes hacer así:

function previewFile(input){
    var file = $("input[type=file]").get(0).files[0];

    if(file){
        var reader = new FileReader();

        reader.onload = function(){
          crearVistaPrevia(reader.result);
        }

        reader.readAsDataURL(file);
    }
}

function crearVistaPrevia(img) {
   var imagen = '<img src="' + img + '">';
   $("#vistaPrevia").append(imagen);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<p>
    <input type="file" name="photo" onchange="previewFile(this);" accept="image/x-png,image/gif,image/jpeg">
</p>
<div id="vistaPrevia"></div>

2
  • Muchas gracias!!!!! esto me ayudo demasiado!!!! Commented el 11 sept. 2020 a las 19:44
  • Un gusto haberte ayudado, para eso estamos aquí. Si consideras que mi respuesta resolvió tu duda, la podrías marcar como respuesta por favor? Saludos!
    – Sagnalrac
    Commented el 11 sept. 2020 a las 20:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.