validacion - validar formulario javascript antes de enviar

¿Cómo hacer jQuery para restringir los tipos de archivos durante la carga?

Question

Me gustaría que jQuery limite un campo de carga de archivos solo a jpg / jpeg, png y gif. Estoy haciendo backend comprobando con PHP ya. Ya estoy ejecutando mi botón Enviar a través de una función de JavaScript , así que solo necesito saber cómo verificar los tipos de archivo antes de enviar o alertar.

Answer 1

¿No quiere comprobar más bien en MIME que en cualquier extensión que el usuario mienta? Si es así, es menos de una línea:

<input type="file" id="userfile" accept="image/*|video/*" required />

Answer 2

Aquí hay un código simple para la validación de JavaScript, y después de que se valida, limpiará el archivo de entrada.

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}

Answer 3

Este código funciona bien, pero el único problema es si el formato del archivo no es específico, sino que muestra un mensaje de alerta, pero muestra el nombre del archivo, aunque debería estar descuidando el mismo.

$(''#ff2'').change(
                function () {
                    var fileExtension = [''jpeg'', ''jpg'', ''pdf''];
                    if ($.inArray($(this).val().split(''.'').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only ''.jpeg'',''.jpg'',''.pdf'' formats are allowed.");
                        return false; }
});

Answer 4

Este ejemplo permite subir imágenes PNG solamente.

HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

JS

$(''#FileUpload1'').change(
                function () {
                    var fileExtension = [''png''];
                    if ($.inArray($(this).val().split(''.'').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only ''.png'' format is allowed.");
                        this.value = ''''; // Clean field
                        return false;
                    }
                });

Answer 5

Intento escribir un ejemplo de código de trabajo, lo pruebo y todo funciona.

Hare es código:

HTML:

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

Javascript:

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf(''.'') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert(''false extension!'');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

Answer 6

No se necesita ningún complemento solo para esta tarea. Cobbled esto junto de un par de otras secuencias de comandos:

$(''INPUT[type="file"]'').change(function () {
    var ext = this.value.match(//.(.+)$/)[1];
    switch (ext) {
        case ''jpg'':
        case ''jpeg'':
        case ''png'':
        case ''gif'':
            $(''#uploadButton'').attr(''disabled'', false);
            break;
        default:
            alert(''This is not an allowed file type.'');
            this.value = '''';
    }
});

El truco aquí es configurar el botón de carga a deshabilitado a menos y hasta que se seleccione un tipo de archivo válido.

Answer 7

Para el front-end, es muy conveniente poner el atributo '' accept '' si está usando un campo de archivo.

Ejemplo:

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

Un par de notas importantes:

• El atributo de aceptación es compatible con Internet Explorer 10, Firefox, Opera, Chrome y Safari 6.
• Mostrará texto para la extensión de archivo de manera diferente en el diálogo del buscador de archivos desde diferentes navegadores.

Answer 8

Puede obtener el valor de un campo de archivo de la misma manera que cualquier otro campo. No puedes alterarlo, sin embargo.

Entonces, para verificar superficialmente si un archivo tiene la extensión correcta, podrías hacer algo como esto:

var ext = $(''#my_file_field'').val().split(''.'').pop().toLowerCase();
if($.inArray(ext, [''gif'',''png'',''jpg'',''jpeg'']) == -1) {
    alert(''invalid extension!'');
}

Answer 9

Puede usar el complemento de validación para jQuery: http://docs.jquery.com/Plugins/Validation

Tiene una regla accept () que hace exactamente lo que necesita: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Tenga en cuenta que el control de la extensión de archivo no es a prueba de balas, ya que de ninguna manera está relacionado con el tipo MIME del archivo. Así que podrías tener un .png que sea un documento de Word y un .doc que sea una imagen png perfectamente válida. Así que no olvides hacer más controles en el lado del servidor;)

Answer 10

Si está tratando con varias cargas de archivos (html 5), tomé el comentario sugerido superior y lo modifiqué un poco:

    var files = $(''#file1'')[0].files;
    var len = $(''#file1'').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split(''.'').pop().toLowerCase();
        if ($.inArray(ext, [''gif'', ''png'', ''jpg'', ''jpeg'']) == -1) {
            alert(''invalid extension!'');

        }
    }

Answer 11

para mi caso usé los siguientes códigos:

    if (!(//.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert(''You must select an image file only'');               
    }

Answer 12

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$(''input[type=file]'').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

Answer 13

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split(''.'').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append(''<label for="title" class="error">* File:''+ file +'' do not have a valid format!</label>'');
            }
            return false;
        }
        return true;
    }