Si inserto png funciona, si inserto jpg funciona, pero si dejo el archivo vacío no funciona, ¿por qué? El archivo debe ser png o estar vacío.
function myFunction() { var fileTypecheck = document.getElementById("file").files[0].type.replace(/(.*)\//g, ''); if(fileTypecheck == "png" || fileTypecheck.length == 0){ alert("File is png or 0"); }else{ alert("File is NOT png or 0"); } } <input type="file" name="file" id="file" onchange="loadFile(event)" accept="image/png"> <button onclick="myFunction()">Click me</button>Cuando no hay ningún archivo, el índice de files[0] no existe. Puede agregar un signo de interrogación ( Optional_chaining ) a los files[0] para que no se descomponga cuando no haya archivos. Luego puede cambiar fileTypecheck.length== 0 a !fileTypecheck ya que no estará definido cuando no haya ningún archivo.
function myFunction() { var fileTypecheck = document.getElementById("file").files[0]?.type.replace(/(.*)\//g, ''); if(fileTypecheck == "png" || !fileTypecheck){ alert("File is png or 0"); }else{ alert("File is NOT png or 0"); } } <input type="file" name="file" id="file" accept="image/png"> <button onclick="myFunction()">Click me</button>Cuando un <input type="file"/> no tiene archivos seleccionados, su propiedad HTMLInputElement.files está vacía, por lo que files[0] no está undefined .
Por cierto, no debe confiar en que el navegador siempre le indique con precisión el tipo de archivo: los navegadores generalmente completan la propiedad File.type del registro de extensión de archivo a tipo MIME de su sistema operativo host, que no es confiable y, a menudo, está desactualizado.
Dicho esto, cambie su código a esto: tenga en cuenta que he agregado pasos de programación defensiva para verificar realmente las cosas en lugar de hacer suposiciones:
function myFunction() { const inp = document.getElementById("file"); if( !inp || inp.type !== 'file' ) throw new Error( "'file' input element not found." ); if( inp.files.length !== 1 ) { alert( "Please select a single file first." ); return; } const file = inp.files[0]; if( file.type === 'image/png' ) { // OK } else { alert( "Please select a PNG file." ); } }