Begrenzung des Dateiformats bei Verwendung von <input type="file">?

Question

Ich möchte den Dateityp einschränken, der aus der nativen OS-Dateiauswahl ausgewählt werden kann, wenn der Benutzer auf die Schaltfläche Durchsuchen im Fenster <input type="file"> Element in HTML. Ich habe das Gefühl, dass es unmöglich ist, aber ich würde gerne wissen, ob es est eine Lösung. Ich möchte mich auf HTML und JavaScript beschränken; bitte kein Flash.

Answer 1

Sie können das Attribut "akzeptieren" als Filter in der Dateiauswahlbox verwenden. Mit "accept" können Sie Eingabedateien nach ihrem "Suffix" oder ihrem "MIME-Typ" filtern.

1. auf der Grundlage des Suffixes filtern: Hier erlaubt das Attribut "accept" nur die Auswahl von Dateien mit der Erweiterung .jpeg.

<input type="file" accept=".jpeg" />

2. nach "Dateityp" filtern Hier erlaubt das Attribut "accept" nur die Auswahl einer Datei vom Typ "image/jpeg".

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

Wichtig: Wir können die Erweiterung einer Datei ändern oder löschen, ohne den Meme-Typ zu ändern. Zum Beispiel ist es möglich, eine Datei ohne Erweiterung zu haben, aber der Typ dieser Datei kann "image/jpeg" sein. Diese Datei kann also den Filter accept=".jpeg" nicht passieren, aber sie kann accept="image/jpeg" passieren.

Mit * können wir alle Arten von Dateitypen auswählen. Zum Beispiel erlaubt der folgende Code die Auswahl aller Arten von Bildern, zum Beispiel "image/png" oder "image/jpeg" oder ... . Alle Typen sind erlaubt.

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

4. wir können das Komma ( , ) als "oder-Operator" im Attribut select verwenden. Um zum Beispiel alle Arten von Bildern oder PDF-Dateien zuzulassen, können wir diesen Code verwenden:

<input type="file" accept="image/* , application/pdf" />

Answer 2

Utilice input Tag mit accept Attribut

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

Klicken Sie auf Hier finden Sie die aktuelle Browser-Kompatibilitätstabelle

Live-Demo aquí

Um nur Bilddateien auszuwählen, können Sie Folgendes verwenden accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

Live-Demo aquí

Es werden nur gif, jpg und png angezeigt, Screenshot von Chrome Version 44

Answer 3

Ich weiß, es ist ein bisschen spät.

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

Answer 4

Sie könnten tatsächlich tun es mit Javascript, aber denken Sie daran, js ist Client-Seite, so dass Sie tatsächlich "Warnung Benutzer", welche Art von Dateien, die sie hochladen können, wenn Sie wollen AVOID (einschränken oder begrenzen, wie Sie sagten) bestimmte Art von Dateien, die Sie tun MÜSSEN es Server-Seite.

Blick auf dieses grundlegende Tutorial wenn Sie mit der serverseitigen Validierung beginnen möchten. Das gesamte Tutorial finden Sie unter diese Seite .

Viel Glück!

Answer 5

Wie bereits in früheren Antworten erwähnt, können wir den Benutzer nicht darauf beschränken, Dateien nur für bestimmte Dateiformate auszuwählen. Aber es ist wirklich praktisch, das Akzeptieren-Tag für das Dateiattribut in HTML zu verwenden.

Was die Validierung betrifft, so müssen wir sie auf der Serverseite vornehmen. Wir können es auch auf der Client-Seite in js tun, aber seine nicht eine narrensichere Lösung. Wir müssen auf der Serverseite validieren.

Für diese Anforderungen bevorzuge ich wirklich Struts2 Java Web Application Development Framework. Mit seiner eingebauten Datei-Upload-Funktion ist das Hochladen von Dateien in Struts2-basierte Webanwendungen ein Kinderspiel. Wir müssen nur die Dateiformate angeben, die wir in unserer Anwendung akzeptieren möchten, und der Rest wird vom Kern des Frameworks selbst erledigt. Sie können es auf der offiziellen Struts-Website nachlesen.