J'ai besoin de télécharger uniquement un fichier image via <input type="file"> étiquette.
Pour l'instant, il accepte tous les types de fichiers. Mais, je veux le restreindre à certaines extensions de fichiers d'image spécifiques qui incluent .jpg , .gif etc.
Comment puis-je réaliser cette fonctionnalité ?
Utilisez le accepter de la balise d'entrée. Pour n'accepter que les PNG, JPEG et GIF, vous pouvez utiliser le code suivant :
<input type="file" name="myImage" accept="image/png, image/gif, image/jpeg" />Ou simplement :
<input type="file" name="myImage" accept="image/*" />Notez que cela ne fournit qu'une indication au navigateur quant aux types de fichiers à afficher à l'utilisateur, mais cela peut être facilement contourné, vous devez donc toujours valider le fichier téléchargé sur le serveur également.
Il devrait fonctionner dans IE 10+, Chrome, Firefox, Safari 6+, Opera 15+, mais la prise en charge est très sommaire sur les mobiles (à partir de 2015) et selon certains rapports, cela pourrait empêcher certains navigateurs mobiles de télécharger quoi que ce soit, alors assurez-vous de bien tester vos plateformes cibles.
Pour une prise en charge détaillée des navigateurs, voir http://caniuse.com/#feat=input-file-accept
Des pas :
1. Ajouter l'attribut accept à la balise input
2. Valider avec javascript
3. Ajouter une validation côté serveur pour vérifier si le contenu est bien un type de fichier attendu.
Pour le HTML et le 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>Explication :
Pour ce faire, il faut
<input type="file" accept="image/*" /> Mais ce n'est pas une bonne méthode. Il faut coder du côté du serveur pour vérifier si le fichier est une image ou non.
Vérifier si le fichier image est une image réelle ou une fausse image
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;
}
}Pour plus de références, voir ici
http://www.w3schools.com/tags/att_input_accept.asp
http://www.w3schools.com/php/php_file_upload.asp
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
