Necesito cargar un archivo que es una imagen. Estoy usando <input type="file">.Cómo permitir que <input type = "file"> acepte solo archivos de imagen
Sin embargo, esto acepta todo tipo de archivos. Necesito solo archivos con extensiones como .jpg, .gif etc.
¿Cómo puedo hacer que el cuadro de diálogo de carga permita la selección de solo archivos de imagen?
Utilice el atributo aceptar de la etiqueta de entrada. Así que para aceptar sólo PNG, JPEG y GIF se puede utilizar el siguiente código:
<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />O simplemente:
<input type="file" name="myImage" accept="image/*" />Tenga en cuenta que esto sólo ofrece una sugerencia para el navegador sobre qué tipos de archivos mostrar al usuario, pero esto puede se puede eludir fácilmente, por lo que siempre debe validar el archivo cargado en el servidor también.
Debería funcionar en IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, pero el soporte es muy incompleto en los móviles (a partir de 2015) y según algunos informes, esto podría evitar que algunos navegadores móviles suban en absoluto, así que asegúrese de probar bien sus plataformas objetivo.
Para soporte detallada navegador, ver http://caniuse.com/#feat=input-file-accept
El uso de este:
<input type="file" accept="image/*">
funciona tanto en FF y Chrome.
utilizar de esta manera
<input type="file" accept=".png, .jpg, .jpeg" />
Funcionó para mí
puede utilizar accept atributo para <input type="file"> leer este docs http://www.w3schools.com/tags/att_input_accept.asp
Esto se puede lograr mediante
<input type="file" accept="image/*" />
Pero esta no es una buena manera. tienes que codificar en el servidor para verificar el archivo de una imagen o no.
Comprobar si el archivo de imagen es una imagen real o falsa imagen
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
}
else {
echo "File is not an image.";
$uploadOk = 0;
}
}
Para mayor referencia, ver aquí
http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp
Pasos: 1. Añadir
aceptar atributo etiqueta de entrada
2. Validar con javascript
validación del lado del servidor 3. Agregar para verificar si el contenido es realmente un tipo de archivo esperado
Para HTML y Javascript:
<html>
<body>
<input name="image" type="file" id="fileName" accept=".jpg,.jpeg,.png" onchange="validateFileType()"/>
<script type="text/javascript">
function validateFileType(){
var fileName = document.getElementById("fileName").value;
var idxDot = fileName.lastIndexOf(".") + 1;
var extFile = fileName.substr(idxDot, fileName.length).toLowerCase();
if (extFile=="jpg" || extFile=="jpeg" || extFile=="png"){
//TO DO
}else{
alert("Only jpg/jpeg and png files are allowed!");
}
}
</script>
</body>
</html>
Explicación:
¿Cuál es la tecnología utilizada en el servidor? –
kbvishnu, quizás puedas reconsiderar la respuesta que aceptaste hace tanto tiempo. No tienes que aceptar otra respuesta. Solo estoy sugiriendo, en función de la cantidad de indicadores que obtuvimos en la respuesta y su nivel de votos en comparación con otras respuestas, que tal vez debería al menos considerar no aceptarlo. –