jQuery - INPUT type = File, Image FileType Validation options?

Question

Tengo el siguiente:

<input id="user_profile_pic" name="user[profile_pic]" type="file"> 

En el servidor puedo comprobar para asegurarse de que es una imagen, pero quiero comprobar en la primera del lado del cliente.

¿Cómo con jQuery puedo alertar al usuario si el archivo de entrada seleccionado no es un gif, jpg, png o bmp?

Gracias

Answer 1

desea comprobar cuál es el valor del elemento es, algo a lo largo de las líneas de:

$("#user_profile_pic").change(function() { 

    var val = $(this).val(); 

    switch(val.substring(val.lastIndexOf('.') + 1).toLowerCase()){ 
     case 'gif': case 'jpg': case 'png': 
      alert("an image"); 
      break; 
     default: 
      $(this).val(''); 
      // error message here 
      alert("not an image"); 
      break; 
    } 
}); 

Editar

código modificado basado en el comentario - ahora elimina el valor del archivo seleccionado si no es una imagen

Answer 2

Se podría utilizar una expresión regular:

var val = $("#user_profile_pic").val(); 
if (!val.match(/(?:gif|jpg|png|bmp)$/)) { 
    // inputted file path is not an image of one of the above types 
    alert("inputted file path is not an image!"); 
} 

Por supuesto que podría añadir más formatos de la expresión regular. Hay formas más complejas y completas de lograr esto, pero este método realizará la tarea siempre que la ruta del archivo de imagen ingresada finalice en una extensión de archivo de imagen estándar.

Answer 3

Puede haber navegadores que le permiten crear un <img/> de la ruta determinada, con el que puede comprobar si se trata de una imagen real o no (si no el onerror-event debe activarse en la imagen y tendrá un ancho/altura de 0).

Pero como esto solo funciona en algunos navegadores y supone un riesgo para la seguridad (en mi opinión), no recomendaría hacer esto, por lo que mi respuesta es: no se puede validar allí.

Comprobar las extensiones de archivo como sugiere Alex puede ser una opción, pero la extensión de archivo no garantiza si se trata de una imagen. Sin embargo, como una simple verificación previa (no validación) podría ser útil.

Answer 4

Es bastante simple, no es necesaria ninguna validación de JavaScript. Simplemente escriba esto y solo aceptará archivos de imagen.

<input type="file" multiple accept='image/*'> 

Answer 5

¿Cómo podemos comprobar, que el usuario selecciona archivo de imagen?

• Por validación extensión de archivo
  Es un trabajo como se esperaba, archivo de texto con la extensión .png pasar aquí
• input[type=file][accept=image/*] Inicialmente esconde non-image archivos de usuario. Pero este filtro funciona por extensiones también. Y el usuario aún puede ingresar manualmente cualquier nombre de archivo existente.

• Podemos verificar el tipo mímico del resultado dataUrl, comienza con data:mimetype;base64,.... Entonces, necesitamos el tipo mimet image/*.

  var file = $('#uploadfile'); 
  file.on('change', function (e) { 
      var reader = new FileReader(); 
  
      reader.onload = function() { 
       var data = reader.result; 
       if (data.match(/^data:image\//)) { 
        $('#thumbnail').attr('src', data); 
       } else { 
        console.error('Not an image'); 
       } 
      }; 
  
      reader.readAsDataURL(file.prop('files')[0]); 
  });