Wie kann man zulassen, dass <input type="file"> nur Bilddateien akzeptiert?

Question

Ich muss nur eine Bilddatei hochladen über <input type="file"> Tag.

Zurzeit werden alle Dateitypen akzeptiert. Ich möchte es jedoch auf bestimmte Bilddateierweiterungen beschränken, darunter .jpg , .gif usw.

Wie kann ich diese Funktionalität erreichen?

Answer 1

Mit type="file" und accept="image/*" (oder dem von Ihnen gewünschten Format) können Sie dem Benutzer erlauben, eine Datei mit einem bestimmten Format auszuwählen. Allerdings müssen Sie dies auf der Client-Seite noch einmal überprüfen, da der Benutzer andere Dateitypen auswählen kann. Das funktioniert bei mir.

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

Und dann, in Ihrem Javascript-Skript

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

Nur als Zusatz: Wenn Sie Folgendes einschließen möchten alle modernen Bilddateitypen mit der besten Cross-Browser-Unterstützung, die es geben sollte:

<input type="file" accept="image/apng, image/avif, image/gif, image/jpeg, image/png, image/svg+xml, image/webp">

Dies erlaubt alle Bilddateitypen, die in den meisten Browsern angezeigt werden können, während weniger gebräuchliche Formate wie TIFF oder für das Web ungeeignete Formate wie PSD ausgeschlossen werden.

Answer 3

Sie können bestimmte Bildtypen oder andere Dateitypen hinzufügen und die Validierung in Ihrem Code durchführen:

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

Können Sie accept Attribut für <input type="file"> diese Dokumente lesen http://www.w3schools.com/tags/att_input_accept.asp

Answer 5

In html;

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

Es werden alle Bildformate akzeptiert, aber keine anderen Dateien wie PDF oder Videos.

Aber wenn Sie django verwenden, in django forms.py;

image_field = forms.ImageField(Here_are_the_parameters)