La tarea es obtener la entrada del archivo por nombre de archivo seleccionado sin la ruta usando jQuery. Para seleccionar el archivo usaremos HTML <input type=”file”> . Después de eso, obtendremos el nombre del archivo usando el método jQuery change() . Este método se usa en JQuery para obtener la entrada del archivo por nombre de archivo seleccionado. Y el HTML <input type=”file”> se usa para especificar el campo de selección de archivos y agregar un botón para elegir un archivo para cargarlo en el formulario.
Sintaxis:
$(selector).change(function)
<input type="file">
Los siguientes ejemplos ilustran el enfoque:
Ejemplo 1: En este ejemplo, mostraremos el nombre del archivo con la extensión usando el método change() y el archivo será seleccionado por HTML <input type=”file”>.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to get the file input by selected file
name without the path using jQuery?
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
h4 {
color: purple;
}
</style>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3>
How to get the file input by selected<br>
file name without the path using jQuery?
</h3>
<input type="file" id="geeks">
<h4><!-- Selected file will get here --></h4>
<script>
$(document).ready(function() {
$('input[type="file"]').change(function(e) {
var geekss = e.target.files[0].name;
$("h4").text(geekss + ' is the selected file.');
});
});
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo mostraremos el nombre del archivo con la extensión a través de una alerta, usando el método change() y el archivo será seleccionado por el HTML <input type=”file”>.
html
<!DOCTYPE html>
<html>
<head>
<title>
How to get the file input by selected file
name without the path using jQuery?
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
h4 {
color: purple;
}
</style>
<script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
</script>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3>
How to get the file input by selected<br>
file name without the path using jQuery?
</h3>
<input type="file" id="geeks">
<h4><!-- Selected file will get here --></h4>
<script>
$(document).ready(function(){
$('input[type="file"]').change(function(e){
var geekss = e.target.files[0].name;
alert(geekss + ' is the selected file .');
});
});
</script>
</body>
</html>
Producción:
jQuery es una biblioteca JavaScript de código abierto que simplifica las interacciones entre un documento HTML/CSS. Es muy famosa por su filosofía de «Escribir menos, hacer más» .
Puede aprender jQuery desde cero siguiendo este tutorial de jQuery y ejemplos de jQuery .
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA