Este artículo describe el método para manejar una situación en la que el usuario intenta ingresar un archivo y luego no puede cargar el archivo. Le da al usuario el estado de que el archivo no está cargado. Esto puede ser útil en situaciones en las que se debe enviar un archivo importante o la aplicación requiere el archivo para su funcionalidad.
Nota: este método funciona mejor con navegadores WebKit como Google Chrome y Safari. Puede que no funcione de forma fiable con Mozilla Firefox.
Ejemplo:
Código HTML: El siguiente código se define en el HTML de la página.
<input type='file' id='theFile' onclick="initialize()" />
Explicación:
- El valor de la propiedad type=”file” indica que el tipo de entrada que ingresa el usuario es un archivo.
- El valor de la propiedad id=”theFile” se utiliza para vincular el código JavaScript con el método getElementById().
- El valor de la propiedad onclick=”initialize()” se usa para especificar la llamada a la función cuando el usuario ha hecho clic en la entrada.
Código JavaScript:
javascript
// Get the file input element
var theFile = document.getElementById('theFile');
// Define a function to be called
// when the input is focused
function initialize() {
document.body.onfocus = checkIt;
console.log('initializing');
}
// Define a function to check if
// the user failed to upload file
function checkIt() {
// Check if the number of files
// is not zero
if (theFile.value.length) {
alert('Files Loaded');
}
// Alert the user if the number
// of file is zero
else {
alert('Cancel clicked');
}
document.body.onfocus = null;
console.log('checked');
}
Explicación de la función initialize():
- Se crea la variable theFile y se selecciona el elemento de entrada usando su id.
- La línea «document.body.onfocus = checkIt» define que el evento onfocus se activa cuando se enfoca un elemento.
Explicación de la función checkIt():
- Cuando el usuario carga cualquier archivo, la longitud de los archivos se encuentra utilizando la propiedad File.value.length. A medida que este valor se vuelve distinto de cero, la condición se cumple y aparece un cuadro de alerta que muestra «Archivos cargados».
- Cuando el usuario no carga un archivo, la longitud de los archivos es un valor cero. Debido a esto, la condición no se cumple y aparece un cuadro de alerta que muestra «Se hizo clic en Cancelar».
Código completo: en esta sección, combinaremos las dos secciones de código anteriores para detectar cuándo se hace clic en cancelar en la entrada del archivo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>
How to detect when cancel
is clicked on file input?
</title>
</head>
<body>
<input type='file' id='theFile'
onclick="initialize()" />
<script>
// Get the file input element
var theFile =
document.getElementById('theFile');
// Define a function to be called
// when the input is focused
function initialize() {
document.body.onfocus = checkIt;
console.log('initializing');
}
// Define a function to check if
// the user failed to upload file
function checkIt() {
// Check if the number of files
// is not zero
if (theFile.value.length) {
alert('Files Loaded');
}
// Alert the user if the number
// of file is zero
else {
alert('Cancel clicked');
}
document.body.onfocus = null;
console.log('checked');
}
</script>
</body>
</html>
Producción:
- Entrada de archivo para que el usuario seleccione un archivo:
- Alerta cuando el usuario no ha podido ingresar el archivo:
- En una carga exitosa, el nombre del archivo aparece según lo previsto:
Publicación traducida automáticamente
Artículo escrito por samuelcoder365 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA