En este artículo, aprenderemos cómo activar mediante programación eventos de clic en el elemento del archivo de entrada.
Enfoque: siempre que desee realizar un evento de clic mediante programación, en su condición específica, simplemente use la función de clic() incorporada de JavaScript por objeto DOM. Por ejemplo:
document.getElementById('your_input_type_file_element_id').click();
Ejemplo 1: queremos hacer clic en el elemento del archivo de entrada automáticamente (mediante programación). Cuando el usuario hace clic en un botón que no es el botón ‘cargar archivo’ del elemento de archivo de tipo de entrada, podemos lograrlo usando el siguiente código.
HTML
<!DOCTYPE html>
<html>
<script type="text/javascript">
function open_file(){
document.getElementById('input_file').click();
}
</script>
<body>
<input type="file" name="" id='input_file' hidden>
<button onclick="open_file()">
click event fire programmatically for input
type file element
</button>
</body>
</html>
Salida: el tipo de archivo de entrada está oculto , por lo que cada vez que ejecuta este código, obtiene fácilmente el cuadro de diálogo de selección para la selección de archivos. Después de hacer clic en el botón de arriba, obtenemos el cuadro de diálogo de selección de archivo como el que se encuentra debajo de la imagen.
Ejemplo 2: por ejemplo, cuando un usuario se registra en su servicio, se registra con correo electrónico, nombre de usuario y contraseña, etc. Cada vez que un usuario se registra con éxito, le proporciona una clave secreta por correo electrónico o SMS. El usuario ingresa este secreto en el cuadro de entrada en una página específica, después de lo cual puede elegir el documento / imagen que necesite.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function open_file() {
var secret_key = document.getElementById("secret_key").value;
if (secret_key == "Geeksforgeeks") {
// 'Geeksforgeeks' this value is just an example for
// your understanding.
document.getElementById("input_file").click();
}
}
</script>
</head>
<body>
<p>Write down 'Geeksforgeeks'</p>
<label>Enter Secret Key :</label>
<input type="text" name="username"
id="secret_key" oninput="open_file()" />
<input type="file" name="" id="input_file" hidden />
</body>
</html>
Salida: después de ingresar la clave secreta correcta en el cuadro de entrada, aparecerá el cuadro de diálogo de selección de archivo. Se genera una solicitud AJAX y hace coincidir esa clave de usuario con la clave original a través de archivos backend.
Publicación traducida automáticamente
Artículo escrito por meetpatel5393 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA