¿Cómo jQuery puede 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 back-end comprobando con PHP ya. Estoy ejecutando mi botón Enviar a través de una función JavaScript ya que solo necesito saber cómo verificar los tipos de archivo antes de enviar o alertar.

Answer 1

Puede obtener el valor de un campo de archivo igual que en cualquier otro campo. No puedes alterarlo, sin embargo.

Así que para superficialmente verificación si un archivo tiene la extensión correcta, se podría 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 2

podría utilizar el plug-in de validación de jQuery: http://docs.jquery.com/Plugins/Validation

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

Tenga en cuenta que el archivo de control se extiende sion no es a prueba de balas ya que no está relacionado de ninguna manera con el tipo mimético 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 servidor;)

Answer 3

No se necesita complemento para esta tarea. Adoquinada esto junto a 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 fijar el botón de subida a discapacitados a menos que y hasta que se seleccione un tipo de archivo válido.

Answer 4

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

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

Answer 5

para mi caso he utilizado los siguientes códigos:

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

Answer 6

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; 
    } 

Answer 7

<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 8

Si usted está tratando con múltiples (html 5) carga de archivos, 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 9

Para el front-end, es muy conveniente poner el atributo 'accept' si está utilizando 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:

• The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
• It will show text for file extension differently in the file browser dialog from different browsers.

Answer 10

intento escribir de trabajo ejemplo de código, lo prueba y Todo funciona .

Hare es el 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 11

Aquí es un simple código JavaScript validación, y después de validar que va a 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 12

Este código funciona bien, pero el único problema es si el formato de archivo es distinto de las opciones especificadas, se muestra un mensaje de alerta, pero que muestra el nombre del archivo, mientras que hay que descuidarlo.

$('#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 13

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; 
        } 
       });