Comment permettre à <input type="file"> de n'accepter que des fichiers images ?

Question

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é ?

Answer 1

En utilisant type="file" et accept="image/*" (ou le format que vous souhaitez), vous permettez à l'utilisateur de choisir un fichier au format spécifique. Mais vous devez le vérifier à nouveau du côté client, car l'utilisateur peut sélectionner d'autres types de fichiers. Cela fonctionne pour moi.

<input #imageInput accept="image/*" (change)="processFile(imageInput)" name="upload-photo" type="file" id="upload-photo" />

Et ensuite, dans votre javascript script

processFile(imageInput) {
    if (imageInput.files[0]) {
      const file: File = imageInput.files[0];
      var pattern = /image-*/;

      if (!file.type.match(pattern)) {
        alert('Invalid format');
        return;
      }

      // here you can do whatever you want with your image. Now you are sure that it is an image
    }
  }

Answer 2

Vous ne pouvez pas y parvenir en utilisant le contrôle d'entrée standard. Les techniques courantes consistent à valider les données du côté du serveur ou à utiliser un contrôle de téléchargement Flash qui permet davantage de personnalisation. N'oubliez pas non plus que la vérification de l'extension du fichier est une condition nécessaire mais non suffisante pour qu'un fichier soit une image. Rien n'empêche l'utilisateur de renommer un exécutable en .jpg par exemple.

Answer 3

Vous pouvez utiliser accept attribut pour <input type="file"> lire cette documentation http://www.w3schools.com/tags/att_input_accept.asp

Answer 4

Vous pouvez ajouter un type spécifique d'image ou un autre type de fichier et effectuer une validation dans votre code :

<input  style="margin-left: 10px; margin-top: 5px;" type="file" accept="image/x-png,image/jpeg,application/pdf"
                (change)="handleFileInput($event,'creditRatingFile')" name="creditRatingFile" id="creditRatingFile">

      handleFileInput(event) {
    console.log(event);
    const file = event.target.files[0];
    if (file.size > 2097152) {
        throw err;
    } else if (
      file.type !== "application/pdf"  &&
      file.type !== "application/wps-office.pdf"   && 
      file.type !== 'application/pdf'  && file.type !== 'image/jpg'  && file.type !== 'image/jpeg'  && file.type !== "image/png"
    ) {
throw err;
    } else {

        console.log('file valid')
    }
  }

Answer 5

En html ;

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

Il accepte tous les formats d'image, mais pas d'autres fichiers comme les pdf ou les vidéos.

Mais si vous utilisez django, dans django forms.py ;

image_field = forms.ImageField(Here_are_the_parameters)