Estoy creando un formulario donde necesito cargar imágenes donde puedo cambiar la imagen cargada hasta que envíe el formulario
function previewImage() { var thisElement = event.target var file = thisElement.files; var fileReader = new FileReader(); fileReader.onload = function(event) { thisElement.nextElementSibling.setAttribute("src", event.target.result); } thisElement.style.display = 'none'; fileReader.readAsDataURL(file[0]) }; <input type="file" id="file1" accept="image/*" onchange="previewImage();"> <img id="display1"><br> <input type="file" id="file2" accept="image/*" onchange="previewImage();"> <img id="display2"><br> <input type="file" id="file3" accept="image/*" onchange="previewImage();"> <img id="display3"><br> <input type="file" id="file4" accept="image/*" onchange="previewImage();"> <img id="display4"><br>Quiero cambiar el archivo cargado, pero no puedo hacerlo una vez que lo cargué.
Simplemente elimine esta línea que oculta la entrada de su archivo una vez que se haya seleccionado un archivo:
thisElement.style.display = 'none';Yo haría esto por:
<label> para la entrada relevantenextElementSibling.querySelector("img")fileReader.readAsDataURL(file[0]) en un if para evitar un error cuando el usuario cancela la selección de archivos.De esa manera, puede hacer clic en la imagen para cambiarla después de la primera vez que se configura.
function previewImage() { var thisElement = event.target var file = thisElement.files; var fileReader = new FileReader(); fileReader.onload = function(event) { thisElement.nextElementSibling.querySelector("img").setAttribute("src", event.target.result); } thisElement.style.display = 'none'; if (file.length) { fileReader.readAsDataURL(file[0]) } }; <input type="file" id="file1" accept="image/*" onchange="previewImage();"> <label for="file1"><img id="display1"></label><br> <input type="file" id="file2" accept="image/*" onchange="previewImage();"> <label for="file2"><img id="display2"></label><br> <input type="file" id="file3" accept="image/*" onchange="previewImage();"> <label for="file3"><img id="display3"></label><br> <input type="file" id="file4" accept="image/*" onchange="previewImage();"> <label for="file4"><img id="display4"></label><br>