HTML: ¿Cómo limitar la carga de archivos para que sean solo imágenes?

Con HTML, ¿cómo limito qué tipo de archivos se pueden cargar?

Para facilitar la experiencia del usuario, quiero limitar la carga de archivos para que sean solo imágenes (jpeg, gif, png).

<form method="post" action="..." enctype="multipart/form-data">
<label for="image">Photo</label>
<input name="image" type="file" />
</form>

HTML5 dice <input type="file" accept="image/*">. Por supuesto, nunca confíe en la validación del lado del cliente: siempre verifique nuevamente en el lado del servidor ...

La entrada de archivo HTML5 tiene un atributo de aceptación y también un atributo múltiple. Mediante el uso de múltiples atributos, puede cargar varias imágenes en una instancia.

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

También puede limitar varios tipos de mime.

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

y otra forma de verificar el tipo mime usando el objeto de archivo.

El objeto de archivo le da nombre, tamaño y tipo.

var files=e.target.files;

var mimeType=files[0].type; // You can get the mime type

También puede restringir que el usuario cargue algunos tipos de archivos mediante el código anterior.

Editado

Si las cosas fueran como DEBEN ser, puede hacerlo a través del atributo "Aceptar".

http://www.webmasterworld.com/forum21/6310.htm

Sin embargo, los navegadores ignoran esto, por lo que esto es irrelevante. La respuesta corta es, no creo que haya una manera de hacerlo en HTML. Tendría que verificarlo en el lado del servidor.

La siguiente publicación anterior tiene información que podría ayudarlo con alternativas.

Atributo 'aceptar' de entrada de archivo: ¿es útil?

Aquí está el HTML para cargar imágenes. Por defecto mostrará los archivos de imagen solo en la ventana de navegación porque hemos puesto accept="image/*". Pero aún podemos cambiarlo desde el menú desplegable y mostrará todos los archivos. Entonces, la parte Javascript valida si el archivo seleccionado es o no una imagen real.

 <div class="col-sm-8 img-upload-section">
     <input name="image3" type="file" accept="image/*" id="menu_images"/>
     <img id="menu_image" class="preview_img" />
     <input type="submit" value="Submit" />
 </div> 

Aquí, en el evento de cambio, primero verificamos el tamaño de la imagen. Y en la segunda ifcondición, verificamos si es o no un archivo de imagen.

this.files[0].type.indexOf("image")será -1si no es un archivo de imagen.

document.getElementById("menu_images").onchange = function () {
    var reader = new FileReader();
    if(this.files[0].size>528385){
        alert("Image Size should not be greater than 500Kb");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();     
        return false;
    }
    if(this.files[0].type.indexOf("image")==-1){
        alert("Invalid Type");
        $("#menu_image").attr("src","blank");
        $("#menu_image").hide();  
        $('#menu_images').wrap('<form>').closest('form').get(0).reset();
        $('#menu_images').unwrap();         
        return false;
    }   
    reader.onload = function (e) {
        // get loaded data and render thumbnail.
        document.getElementById("menu_image").src = e.target.result;
        $("#menu_image").show(); 
    };

    // read the image file as a data URL.
    reader.readAsDataURL(this.files[0]);
};

Solo puede hacer esto de forma segura en el lado del servidor. El uso del atributo "aceptar" es bueno, pero también debe validarse en el lado del servidor para que los usuarios no puedan acceder a su script sin esa limitación.

Le sugiero que: descarte cualquier archivo que no sea de imagen, advierta al usuario y vuelva a mostrar el formulario.

<script>

    function chng()
    {
        var typ=document.getElementById("fiile").value;
        var res = typ.match(".jp");

        if(res)
        {
            alert("sucess");
        }
        else
        {
            alert("Sorry only jpeg images are accepted");
            document.getElementById("fiile").value="; //clear the uploaded file
        }
    }

</script>

Ahora en la parte html

<input type="file" onchange="chng()">

este código verificará si el archivo cargado es un archivo jpg o no y restringe la carga de otros tipos

Finalmente, el filtro que se muestra en la ventana Examinar lo establece el navegador. Puede especificar todos los filtros que desee en el atributo Aceptar, pero no tiene garantía de que el navegador de su usuario se adhiera a él.

Su mejor opción es hacer algún tipo de filtrado en el back-end del servidor.

Verifique un proyecto llamado Uploadify. http://www.uploadify.com/

Es un cargador de archivos basado en Flash + jQuery. Esto utiliza el cuadro de diálogo de selección de archivos de Flash, que le brinda la capacidad de filtrar tipos de archivos, seleccionar varios archivos al mismo tiempo, etc.