Cómo validar una entrada de archivo en el lado del cliente (Javascript)

Question

Tengo un formulario almacenado en una variable Javascript a continuación:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
"<label> Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/>" + 
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label></form> 

Ahora bien, como se puede ver cuando el usuario hace clic en el botón de envío, que se somete a la función 'startImageUpload' que está por debajo:

function startImageUpload(imageuploadform){ 
    $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible'); 
    $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden'); 
    sourceImageForm = imageuploadform; 
     return true; 
} 

lo que hace es que cuando el usuario hace clic en enviar, se muestra una barra de carga y carga el formulario.

Ahora mi pregunta es que quiero realizar una simple validación de JavaScript donde cuando el usuario haga clic en el botón de enviar en el formulario, verificará si el archivo es un tipo de archivo 'png' o 'gif'. Si es el tipo de archivo correcto, muestre la barra de carga y cargue el formulario. Si el tipo de archivo es incorrecto, muestre una alerta n indicando que el tipo de archivo es incorrecto pero no muestra la barra de carga y no carga el formulario.

¿Alguien sabe cómo esto se puede codificar? Es así que puedo usar el ejemplo de una de tus respuestas para luego expandirme y usar el javascript para validar en más tipos de archivos y también el tamaño del archivo, así que será muy útil si alguien puede por favor ayudarme.

Gracias

Answer 1

Prueba esto:

$("#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; 
    } 
}); 

Answer 2

Puede comprobar así ...

var validExtensions = ['png', 'gif'], 
    validExtensionSupplied = $.inArray(
      ($('.fileImage').val().match(/\.(.*?)]\s*$/) || [])[1], 
      validExtensions) != -1; 

Alternativamente, puede validar por tipo MIME marcando la $('.fileImage').prop('files')[0].type.

Answer 3

function startImageUpload(imageuploadform){ 

    var form = $(imageuploadform) 
    , value = form.find('.fileImage').val() 

    form.find('.imagef1_upload_process').css('visibility','visible') 
    form.find('.imagef1_upload_form').css('visibility','hidden') 

    if (!/\.(png|gif)$/.test(value)){ 
    return false 
    } 
    return true 
} 

La especificación HTML también ha evolucionado para incluir un atributo accept:

<input type="file" accept="image/png,image/gif" /> 

(apoyado en Chrome, Firefox y Opera - IE10, Safari 6 en un futuro próximo)

Answer 4

Este es mi solución, es bastante fácil y rápida

var accept = $(event.target).attr('accept'); 
    //<input name='fileImage' accept='.png,.jpg,.jpeg' type='file' class='fileImage' /> 

    value = $(event.target).val(), ext = value.substring(value.lastIndexOf('.')); 

    if(ext && accept.indexOf(ext) == -1){ 

     console.log('No'); 

    }