javascript - peso - Validación de la extensión de archivo antes de cargar el archivo

validar input file jquery

Question

Estoy cargando imágenes a un servlet. La validación de si el archivo cargado es una imagen se realiza solamente en el lado del servidor, al verificar los números mágicos en el encabezado del archivo. ¿Hay alguna manera de validar las extensiones en el lado del cliente antes de enviar el formulario a servlet? Tan pronto como presiono Enter, comienza a cargar.

Estoy usando Javascript y jQuery en el lado del cliente.

Actualización: finalmente terminé con la validación del lado del servidor que lee los bytes y rechaza la carga si no es una imagen.

Answer 1

Aquí hay una forma más reutilizable, suponiendo que use jQuery

Función de biblioteca (no requiere jQuery):

function stringEndsWithValidExtension(stringToCheck, acceptableExtensionsArray, required) {
    if (required == false && stringToCheck.length == 0) { return true; }
    for (var i = 0; i < acceptableExtensionsArray.length; i++) {
        if (stringToCheck.toLowerCase().endsWith(acceptableExtensionsArray[i].toLowerCase())) { return true; }
    }
    return false;
}


String.prototype.startsWith = function (str) { return (this.match("^" + str) == str) }

String.prototype.endsWith = function (str) { return (this.match(str + "$") == str) }

Función de página (requiere jQuery (apenas)):

$("[id*=''btnSaveForm'']").click(function () {
    if (!stringEndsWithValidExtension($("[id*=''fileUploader'']").val(), [".png", ".jpeg", ".jpg", ".bmp"], false)) {
        alert("Photo only allows file types of PNG, JPG and BMP.");
        return false;
    }
    return true;
});

Answer 2

Es posible verificar solo la extensión del archivo, pero el usuario puede cambiar fácilmente el nombre de virus.exe a virus.jpg y "pasar" la validación.

Por lo que vale, aquí está el código para verificar la extensión del archivo y cancelar si no cumple con una de las extensiones válidas: (elija el archivo no válido e intente enviarlo para ver la alerta en acción)

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function Validate(oForm) {
    var arrInputs = oForm.getElementsByTagName("input");
    for (var i = 0; i < arrInputs.length; i++) {
        var oInput = arrInputs[i];
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFileExtensions.length; j++) {
                    var sCurExtension = _validFileExtensions[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }
                
                if (!blnValid) {
                    alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                    return false;
                }
            }
        }
    }
  
    return true;
}

<form onsubmit="return Validate(this);">
  File: <input type="file" name="my file" /><br />
  <input type="submit" value="Submit" />
</form>

Tenga en cuenta que el código permitirá al usuario enviar sin elegir el archivo ... si es necesario, elimine la línea if (sFileName.length > 0) { y su paréntesis de cierre asociado. El código validará cualquier entrada de archivo en el formulario, independientemente de su nombre.

Esto se puede hacer con jQuery en menos líneas, pero estoy lo suficientemente cómodo con el JavaScript "sin formato" y el resultado final es el mismo.

En caso de que tenga más archivos, o desee activar el cheque al cambiar el archivo y no solo en el envío del formulario, use dicho código en su lugar:

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

Esto mostrará alerta y restablecerá la entrada en caso de una extensión de archivo no válida.

Answer 3

Esta es la mejor solución en mi opinión, que es mucho más corta que las otras:

function OnSelect(e) {
    var acceptedFiles = [".jpg", ".jpeg", ".png", ".gif"];
    var isAcceptedImageFormat = ($.inArray(e.files[0].extension, acceptedFiles)) != -1;

    if (!isAcceptedImageFormat) {
        $(''#warningMessage'').show();
    }
    else {
        $(''#warningMessage'').hide();
    }
}

En este caso, la función se llama desde un control de carga Kendo con esta configuración:

.Events(e => e.Select("OnSelect")) .

Answer 4

Ninguna de las respuestas existentes parecía suficientemente compacta para la simplicidad de la solicitud. Comprobar si un campo de entrada de archivo dado tiene una extensión desde un conjunto se puede lograr de la siguiente manera:

function hasExtension(inputID, exts) {
    var fileName = document.getElementById(inputID).value;
    return (new RegExp(''('' + exts.join(''|'').replace(//./g, ''//.'') + '')$'')).test(fileName);
}

Así que el uso del ejemplo podría ser (donde la upload es la id de una entrada de archivo):

if (!hasExtension(''upload'', [''.jpg'', ''.gif'', ''.png'']) {
    // ... block upload
}

O como un plugin jQuery:

$.fn.hasExtension = function(exts) {
    return (new RegExp(''('' + exts.join(''|'').replace(//./g, ''//.'') + '')$'')).test($(this).val());
}

Ejemplo de uso:

if (!$(''#upload'').hasExtension([''.jpg'', ''.png'', ''.gif''])) {
    // ... block upload
}

El .replace(//./g, ''//.'') Está ahí para escapar del punto de la .replace(//./g, ''//.'') modo que las extensiones básicas se puedan pasar sin que los puntos coincidan con ningún carácter.

No hay error al verificar estos para mantenerlos cortos, presumiblemente si los usa, se asegurará de que la entrada exista primero y la matriz de extensiones sea válida.

Answer 5

Puede crear una matriz que incluya el tipo de archivo que se necesita y use $ .inArray () en jQuery para verificar si el tipo de archivo existe en la matriz.

var imageType = [''jpeg'', ''jpg'', ''png'', ''gif'', ''bmp''];  

// Given that file is a file object and file.type is string 
// like "image/jpeg", "image/png", or "image/gif" and so on...

if (-1 == $.inArray(file.type.split(''/'')[1], imageType)) {
  console.log(''Not an image type'');
}

Answer 6

Puede usar el atributo de accept disponible para los tipos de archivos de entrada. Pagar la documentación de MDN

Answer 7

Si necesita probar las URL remotas en un campo de entrada, puede intentar probar una expresión regular simple con los tipos que le interesan.

$input_field = $(''.js-input-field-class'');

if ( !(//.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
  $(''.error-message'').text(''This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.'');
  return false;
}

Esto capturará cualquier cosa que termine en .gif, .jpg, .jpeg, .tiff o .png

Debo señalar que algunos sitios populares como Twitter añaden un atributo de tamaño al final de sus imágenes. Por ejemplo, lo siguiente no pasaría esta prueba aunque sea un tipo de imagen válida:

https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large

Por eso, esta no es una solución perfecta. Pero te llevará a aproximadamente el 90% del camino.

Answer 8

Vine aquí porque estaba seguro de que ninguna de las respuestas aquí era bastante ... poética:

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( //.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}

<input type="file" id="fUpload" onchange="checkextension()"/>

Answer 9

[Mecanografiado]

uploadFileAcceptFormats: string[] = [''image/jpeg'', ''image/gif'', ''image/png'', ''image/svg+xml''];

// if you find the element type in the allowed types array, then read the file
isAccepted = this.uploadFileAcceptFormats.find(val => {
    return val === uploadedFileType;
});

Answer 10

compruebe que si el archivo está seleccionado o no

       if (document.myform.elements["filefield"].value == "")
          {
             alert("You forgot to attach file!");
             document.myform.elements["filefield"].focus();
             return false;  
         }

compruebe la extensión de archivo

  var res_field = document.myform.elements["filefield"].value;   
  var extension = res_field.substr(res_field.lastIndexOf(''.'') + 1).toLowerCase();
  var allowedExtensions = [''doc'', ''docx'', ''txt'', ''pdf'', ''rtf''];
  if (res_field.length > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1) 
             {
               alert(''Invalid file Format. Only '' + allowedExtensions.join('', '') + '' are allowed.'');
               return false;
             }
    }

Answer 11

prueba esto (funciona para mí)

  
  function validate(){
  var file= form.file.value;
       var reg = /(.*?)/.(jpg|bmp|jpeg|png)$/;
       if(!file.match(reg))
       {
        alert("Invalid File");
        return false;
       }
       }

<form name="form">
<input type="file" name="file"/>
<input type="submit" onClick="return validate();"/>
</form>

     

Answer 12

Me gusta este ejemplo:

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById(''<%= fpImages.ClientID %>'');
        var FileUploadPath = fuData.value;

        if (FileUploadPath == '''') {
            // There is no file selected 
            args.IsValid = false;
        }
        else {
            var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf(''.'') + 1).toLowerCase();
            if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
                args.IsValid = true; // Valid file type
                FileUploadPath == '''';
            }
            else {
                args.IsValid = false; // Not valid file type
            }
        }
    }
</script>

Answer 13

var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];    
function ValidateSingleInput(oInput) {
    if (oInput.type == "file") {
        var sFileName = oInput.value;
         if (sFileName.length > 0) {
            var blnValid = false;
            for (var j = 0; j < _validFileExtensions.length; j++) {
                var sCurExtension = _validFileExtensions[j];
                if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
                    blnValid = true;
                    break;
                }
            }
             
            if (!blnValid) {
                alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
                oInput.value = "";
                return false;
            }
        }
    }
    return true;
}

File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />

Answer 14

$(function () {
    $(''input[type=file]'').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)/.(docx|doc|pdf|xml|bmp|ppt|xls)$");

        if (!(regex.test(val))) {
            $(this).val('''');
            alert(''Please select correct file format'');
        }
    });
});

Answer 15

<script type="text/javascript">

        function file_upload() {
            var imgpath = document.getElementById("<%=FileUpload1.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload your Photo...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("//");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "bmp" || filext == "gif" || filext == "png" || filext == "jpg" || filext == "jpeg" ) {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload Photo with Extension '' bmp , gif, png , jpg , jpeg ''");
                    document.form.word.focus();
                    return false;
                }
            }
        }

        function Doc_upload() {
            var imgpath = document.getElementById("<%=FileUpload2.ClientID %>").value;
            if (imgpath == "") {
                alert("Upload Agreement...");
                document.file.word.focus();
                return false;
            }
            else {
                // code to get File Extension..

                var arr1 = new Array;
                arr1 = imgpath.split("//");
                var len = arr1.length;
                var img1 = arr1[len - 1];
                var filext = img1.substring(img1.lastIndexOf(".") + 1);
                // Checking Extension
                if (filext == "txt" || filext == "pdf" || filext == "doc") {
                    alert("Successfully Uploaded...")
                    return false;
                }
                else {
                    alert("Upload File with Extension '' txt , pdf , doc ''");
                    document.form.word.focus();
                    return false;
                }
            }
        }
</script>