En este artículo, aprenderemos cómo implementar la validación del tipo de archivo al verificar la extensión del archivo antes de cargarlo usando Javascript . Esta es una demostración de la validación del lado del cliente y se implementa para brindar una buena experiencia de usuario. En algunos casos, la validación del lado del cliente es un método mucho mejor en comparación con el método del lado del servidor, ya que consume menos tiempo.
Con JavaScript, puede verificar fácilmente la extensión de archivo seleccionada con las extensiones de archivo permitidas y puede restringir al usuario para que cargue solo los tipos de archivo permitidos. Para esto usaremos la función fileValidation() . Crearemos la función fileValidation() que contiene el código completo de validación del tipo de archivo. En esta función, usaremos expresiones regulares para verificar el tipo de archivo según el patrón dado.
Los siguientes ejemplos implementan el enfoque anterior:
Ejemplo 1: En este ejemplo, cargamos un archivo con extensiones .jpeg/.jpg/.png/.gif solamente. Almacenamos una lista de extensiones en una variable y comparamos cada una de ellas con la extensión del archivo cargado. Para separar la extensión del archivo cargado, usaremos expresiones regulares y también previsualizaremos el archivo cargado si la extensión del archivo cargado sigue el tipo de archivo.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
File Type Validation while
Uploading it using JavaScript
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3>
Validation of file type while
uploading using JavaScript?
</h3>
<!-- File input field -->
<p>Upload an Image</p>
<input type="file" id="file"
onchange="return fileValidation()" />
<!-- Image preview -->
<div id="imagePreview"></div>
<script>
function fileValidation() {
var fileInput =
document.getElementById('file');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.jpg|\.jpeg|\.png|\.gif)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('Invalid file type');
fileInput.value = '';
return false;
}
else
{
// Image preview
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById(
'imagePreview').innerHTML =
'<img src="' + e.target.result
+ '"/>';
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
</script>
</body>
</html>
Producción:
Ejemplo 2: cargar el archivo con extensiones .doc/.docx/.odt/.pdf/.tex/.txt/.rtf/.wps/.wks/.wpd únicamente. Almacene la lista de extensiones en una variable y compare cada una de ellas con la extensión del archivo cargado. Para separar la extensión del archivo subido usaremos una expresión regular.
html
<!DOCTYPE html>
<html>
<head>
<title>
File Type Validation while
Uploading it using JavaScript
</title>
<style>
h1 {
color: green;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<h3>
Validation of file type while
uploading using JavaScript?
</h3>
<!-- File input field -->
<p>Upload an Image</p>
<input type="file" id="file"
onchange="return fileValidation()" />
<!-- Image preview -->
<div id="imagePreview"></div>
<script>
function fileValidation() {
var fileInput =
document.getElementById('file');
var filePath = fileInput.value;
// Allowing file type
var allowedExtensions =
/(\.doc|\.docx|\.odt|\.pdf|\.tex|\.txt|\.rtf|\.wps|\.wks|\.wpd)$/i;
if (!allowedExtensions.exec(filePath)) {
alert('Invalid file type');
fileInput.value = '';
return false;
}
}
</script>
</body>
</html>
Producción:
HTML es la base de las páginas web, se utiliza para el desarrollo de páginas web mediante la estructuración de sitios web y aplicaciones web. JavaScript es más conocido por el desarrollo de páginas web, pero también se usa en una variedad de entornos que no son de navegador. Puede obtener más información sobre HTML y Javascript en los enlaces que se proporcionan a continuación:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA