¿Cómo obtener extensiones de archivo usando JavaScript?

método split() y pop()
método substring() y lastIndexOf()
método match() con expresión regular

Los métodos anteriores se describen a continuación uno por uno con el ejemplo adecuado.

Usando el método split() y pop():

El nombre de archivo completo se obtiene primero seleccionando la entrada del archivo y obteniendo su propiedad de valor. Esto devuelve el nombre del archivo como una string.

Con la ayuda del método split(), dividiremos el nombre del archivo en 2 partes. La primera parte será el nombre del archivo y la segunda parte será la extensión del archivo.

La extensión se puede obtener extrayendo de la array la última string con el método pop(). Por lo tanto, esta es la extensión de archivo del archivo seleccionado.

Sintaxis:

fileName.split(separator, limit).pop();

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>How to get file extensions using JavaScript? </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <b>Here we will get "Extension" of selected file</b>
    <p>Select a file and click on the button 
       to check the file extension.</p>
    <form>
        <input type="file" id="file1" />
        <input type="button" value="Check Extension" 
                             onclick="checkFileExtension();"/>
    </form>
    <p>The file extension is: <span class="output"></span></p>
    <script language="javascript">
        function checkFileExtension() {
            fileName = document.querySelector('#file1').value;
            extension = fileName.split('.').pop();
            document.querySelector('.output')
                                     .textContent = extension;
        };
    </script>
</body>
  
</html>

Producción:

salida dividida

Uso de los métodos substring() y lastIndexOf():
el nombre de archivo completo se obtiene primero después de que se use el método substring() para devolver la parte de una string entre los índices inicial y final.

El índice inicial se proporciona utilizando el método lastIndexOf(). Esto devuelve el índice en la string donde ocurre la última string pasada. El último índice se puede encontrar pasando un punto (.) a este método. El índice se pasa al método substring(), que devuelve la string desde el punto (.) hasta el final. Esta es la extensión del archivo.

Sintaxis:

fileName.substring(fileName.lastIndexOf(searchvalue, start);

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>How to get file extensions using JavaScript? </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <b>Here we will get "Extension" of selected file</b>
    <p>Select a file and click on the button
        to check the file extension.</p>
    <form>
        <input type="file" id="file1" />
        <input type="button" value="Check Extension" 
                               onclick="checkFileExtension();" />
    </form>
    <p>The file extension is: <span class="output"></span></p>
    <script language="javascript">
        function checkFileExtension() {
            fileName = document.querySelector('#file1').value;
            extension = fileName.substring(fileName.lastIndexOf('.') + 1);
            document.querySelector('.output')
                                    .textContent = extension;
        };
    </script>
</body>
  
</html>

Producción:

salida de substring

método match() con expresión regular:

Las expresiones regulares se pueden usar para extraer la extensión del archivo del nombre completo del archivo. Se crea un nuevo objeto RegExp con la expresión regular “[^.]+$”. El signo de intercalación (^) marca el comienzo de una string. El punto (.) después del símbolo de intercalación especifica que la string se selecciona después del punto. El cuantificador más (+) selecciona una o más palabras. El dólar ($) se usa para especificar el final de la línea. Esta expresión selecciona la string después del punto.

El método match() se utiliza para devolver la parte de la string que coincide con la expresión regular que se le pasó como parámetro. El nombre completo del archivo se pasa a este método y la expresión regular devuelve solo la extensión del archivo.

Sintaxis:

fileName = document.querySelector('#file1').value;
regex = new RegExp('[^.]+$');
extension = fileName.match(regex);

Ejemplo:

<!DOCTYPE html>
<html>
  
<head>
    <title>How to get file extensions using JavaScript? </title>
</head>
  
<body style="text-align: center;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <b>Here we will get "Extension" of selected file</b>
    <p>Select a file and click on the button 
         to check the file extension.</p>
    <form>
        <input type="file" id="file1" />
        <input type="button" value="Check Extension" 
                               onclick="checkFileExtension();"/>
    </form>
    <p>The file extension is: <span class="output"></span></p>
    <script language="javascript">
        function checkFileExtension() {
            fileName = document.querySelector('#file1').value;
  
            regex = new RegExp('[^.]+$');
  
            extension = fileName.match(regex);
            document.querySelector('.output')
                                     .textContent = extension;
        };
    </script>
</body>
  
</html>

Producción:
salida de expresión regular

Publicación traducida automáticamente

Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta