Estoy trabajando en un proyecto antiguo y tratando de corregir algunos errores.
Tengo un archivo cargado en HTML
function updateImage() { circleArray = []; newPic = `id="taco" width="300" height="300" src="${$( "#myFile" ).val()}" alt="prime.png"`; $("#hide").empty(); $("#hide").append(`<img ${newPic}>`); makeCanvas(); } <form> <input type="file" id="myFile" name="filename"> <button id='submit'>Submit</button> </form>Cuando hago clic en el botón Enviar, tengo una función que debería actualizar la imagen que se muestra con la imagen recién cargada.
Parece que el archivo está subido pero estoy accediendo a él incorrectamente.
veo el siguiente error
GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME
No puedo reproducir el problema en su "fragmento de código" dinámico, pero está bastante claro lo que está sucediendo.
El error GET c:\fakepath\IMG_0544.jpg net::ERR_UNKNOWN_URL_SCHEME significa que su navegador estaba tratando de acceder a un archivo en su unidad C:\ como si fuera una URL remota. No puedes hacer eso :)
UNA SOLUCIÓN POSIBLE: intente cargar la imagen y renderizarla como una "imagen incrustada", según este artículo:
https://www.thesitewizard.com/html-tutorial/embed-images-with-data-urls.shtml
OTRA POSIBLE SOLUCIÓN: Use FileReader.readAsDataURL() :
https://www.tutorialrepublic.com/faq/how-to-preview-an-image-before-is-is-loaded-using-jquery.php
Considera lo siguiente.
$(function() { function updateImage() { var newPic = $("<img>", { id: "taco", alt: "prime.png" }).css({ width: 300, height: 300 }); var myFile = $("#myFile")[0].files[0]; var reader = new FileReader(); reader.onload = function(event) { newPic.attr("src", event.target.result); $("#hide").empty().append(newPic); }; reader.readAsDataURL(myFile); //makeCanvas(); } $("form").submit(function(event) { event.preventDefault(); updateImage(); return false; }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <input type="file" id="myFile" name="filename"> <button id='submit'>Submit</button> </form> <div id="hide"></div> Esto lee el archivo del elemento de input y lo representa como una imagen.
Prueba esto :
function updateImage() { circleArray = []; newPic = `id="taco" width="300" height="300" src="${$("#myFile").get(0).files[0].name}" alt="prime.png"`; $("#hide").empty(); $("#hide").append(`<img ${newPic}>`); makeCanvas(); }