A continuación se muestra mi código para obtener una vista previa de un archivo. la declaración if siempre devuelve falso. por lo que el código interno nunca se ejecuta. cuando cierro la sesión de un archivo, devuelve el tipo: image/png pero no lo acepta cuando se compara en la declaración if
let fileInput = document.getElementById('files') let filesContainer = document.getElementById('files-container') let numberOfFiles = document.getElementById('number-of-files') function preview() { filesContainer.innerHTML = '' numberOfFiles.textContent = `${fileInput.files.length} Files Selected` for (i of fileInput.files) { let reader = new FileReader() let figure = document.createElement('figure') let figCap = document.createElement('figcaption') figCap.innerText = i.name console.log(i) figure.appendChild(figCap) reader.onload = () => { if (i.type.match('image/png')) { consel.log('PNG') let img = document.createElement('img') img.src = reader.result figure.appendChild(img) } /* if (i.type == "image/jpeg" || i.type == "image/png" || i.type == "image/gif") { console.log("Hello?"); let file = document.createElement('img'); file.setAttribute('src', reader.result); figure.insertBefore(file, figCap); } else if (i.type == "model/stl") { console.log(`${i.name} is of type stl`, i); } else { log(`${i.name} is of type ${i.type} and is not supported`); }*/ } filesContainer.appendChild(figure) reader.readAsDataURL(i) } }Espero que puedan ayudar.
Hola, descubrí por qué estaba funcionando tan extraño. Tenía un archivo en mi colección de prueba que hacía que el lector nunca terminara, por lo que nunca obtuvo la parte de la declaración if. La solución que usé es agregar el lector. Cargar dentro de la declaración if como esta
if (i.type.match('image/png')) { reader.onload = () => { let img = document.createElement('img') img.src = reader.result figure.appendChild(img) } }