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

126

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>
JacobT
fuente
Obviamente, para asegurar esto adecuadamente, verificaría el lado del servidor / backend. Pero todo lo que busco es una forma de simplemente la experiencia del usuario para que cuando hagan clic en "buscar" para encontrar la imagen que desean cargar, no tengan que ver todos esos documentos de Word, etc. que no son aplicables a upload
JacobT
No sé si puedes configurar una máscara de archivo. Nunca lo he visto hecho con éxito.
Robert K

Respuestas:

230

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

Ms2ger
fuente
87

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.

Konga Raju
fuente
44
image/*|audio/*|video/*no funciona para mí, debería estar separado por comas parece:image/*,video/mp4,.txt
serg
¡Excelente para verificar el mimeType! Tx!
Pedro Ferreira el
6

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]);
};
Vineesh Puttanisseri
fuente
Añadir explicación por favor.
Paul Swetz
Tenga en cuenta que lo anterior requiere jquery, pero no lo dice. Suficientemente fácil de entender, pero útil para indicar. He creado un violín para este . Hace algunas otras cosas (como se requiere para un proyecto), pero el concepto es muy similar.
Dave Land
1

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.

Robert K
fuente
1
<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

Arun Prabhakaran P
fuente
Esta comprobación se vence con un simple cambio de nombre de la extensión del archivo. Al menos debe verificar el tipo de URI de datos si va a hacer algo como esto.
Lucas Leblanc
0

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.

John Lechowicz
fuente
0

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.

AndrewR
fuente
30
Flash? ... de ninguna manera!
ErickBest
14
La peor solución de todas.
Matteo Mosconi
1
Chicos, no veo por qué es la peor solución de la historia. Aunque es cierto que Flash va a desaparecer, todavía está siendo utilizado por navegadores antiguos, muy antiguo, está bien, pero todavía se está utilizando, y esta solución tiene ambos tipos de tecnologías: jQuery + HTML5 y Flash Fallback. Es tan bueno como VideoJS, que tiene un respaldo Flash en caso de que el navegador no pueda reproducir el video ... No he probado la solución, no puede ser la mejor, pero los votos negativos no son justos.
Unapedra
1
+1 tonto para votar hacia abajo. Flash está desapareciendo pero tiene un buen respaldo. ¿Qué crees que Google usa para gmail para el respaldo de socket? Tonto.
Jason Sebring
8
Esta respuesta tiene 4 años. En ese momento, la compatibilidad con HTML5 para la selección de múltiples archivos o el filtrado de la ventana de selección de archivos por los tipos aceptados no era compatible con ninguno de los principales navegadores. Esta era una solución que habría funcionado para muchos en ese momento, pero ahora me gustaría avanzar hacia una solución HTML5 pura.
AndrewR