Tengo este formulario simple en mi código HTML para cargar un archivo y una función de JavaScript para asegurarme de que el archivo no sea demasiado grande, todo funciona bien. De hecho, el segundo falso en mi JavaScript está ahí solo para evitar que envíe el formulario mientras construyo la función de validación.
Mi error comienza a ocurrir cuando trato de verificar si un archivo no ha sido seleccionado.
Simplemente usando el código a continuación, si no selecciono ningún archivo, luego hago clic en enviar, el formulario se publica y llama al segundo script. Aunque mi función de JavaScript siempre devuelve un falso.
Supongo que tengo un error de JavaScript, por lo que mi código salta de la función y el formulario continúa publicándose.
¿Supongo que hay una forma adecuada de llamar a document.getElementById('myFile').files[0].name y verificar si es NULL, sin desencadenar un error?
Formulario HTML
<form onsubmit="return checkFile()" name ="uploadlist" action="http://www.example.com/cgi-bin/upload2.pl" method="post" enctype="multipart/form-data">y el JavaScript
<script> function checkFile(){ var fileName = document.getElementById('myFile').files[0].name; alert(fileName); var fileSize = document.getElementById('myFile').files[0].size; alert(fileSize); if( document.getElementById('myFile').files[0].size > 1000000) { alert ("File is too large"); return false; } return false; } </script> </body>Intente agregar el atributo required a su campo <input> :
<input type='file' required /> O verifique la longitud document.getElementById('myFile').files , p.
if (document.getElementById('myFile').files.length == 0) return false;Puede agregar el atributo required al campo <input> , pero eso supone que el navegador lo admite. Para estar seguro, su Javascript aún debe verificar document.getElementById('myFile').files.length para determinar si se especificó un archivo.
Independientemente, también querrá verificar la validez del archivo enviado en el lado del servidor (no se muestra aquí).
function checkFile(){ if ( document.getElementById('myFile').files.length ) { var fileName = document.getElementById('myFile').files[0].name; alert(fileName); var fileSize = document.getElementById('myFile').files[0].size; alert(fileSize); if( document.getElementById('myFile').files[0].size > 1000000) { alert ("File is too large"); return false; } } else { alert('No file selected.'); } return false; } <form onsubmit="return checkFile()" name ="uploadlist" action="#" method="post" enctype="multipart/form-data"> <input type="file" name="myFile" id="myFile" required> <button type="submit">Go</button> </form>