Dateiformat bei Verwendung von <input type = “file”> einschränken?

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

Genau genommen lautet die Antwort nein . Ein Entwickler kann einen Benutzer nicht daran hindern, Dateien jeglicher Art oder Erweiterung hochzuladen.

Das Attribut accept von <input type = "file">kann dennoch dazu beitragen, einen Filter im Dialogfeld zur Dateiauswahl des Betriebssystems bereitzustellen. Zum Beispiel,

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

sollte eine Möglichkeit bieten, andere Dateien als .xls oder .xlsx herauszufiltern. Obwohl auf der MDN- Seite für inputelement immer angegeben wurde, dass dies unterstützt wird, funktionierte dies zu meiner Überraschung in Firefox bis Version 42 nicht. Dies funktioniert in IE 10+, Edge und Chrome.

Um Firefox älter als 42 zusammen mit IE 10+, Edge, Chrome und Opera zu unterstützen, ist es wahrscheinlich besser, eine durch Kommas getrennte Liste von MIME-Typen zu verwenden:

<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

[ Edge (EdgeHTML) -Verhalten: Das Dropdown-Menü für Dateitypfilter zeigt die hier genannten Dateitypen an, ist jedoch nicht die Standardeinstellung in der Dropdown-Liste. Der Standardfilter ist All files (*).]

Sie können auch Sternchen in MIME-Typen verwenden. Zum Beispiel:

<input type="file" accept="image/*" /> <!-- all image types --> 
<input type="file" accept="audio/*" /> <!-- all audio types --> 
<input type="file" accept="video/*" /> <!-- all video types --> 

W3C empfiehlt Autoren, sowohl MIME-Typen als auch entsprechende Erweiterungen im acceptAttribut anzugeben . Der beste Ansatz ist also:

<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle desselben: hier .

Referenz: Liste der MIME-Typen

WICHTIG: Die Verwendung des acceptAttributs bietet nur eine Möglichkeit zum Filtern in Dateien von Typen, die von Interesse sind. In Browsern können Benutzer weiterhin Dateien eines beliebigen Typs auswählen. Zusätzliche (Client-Seite) Kontrollen durchgeführt werden soll (mit Hilfe von JavaScript, wäre ein Weg sein , diese ), und auf jeden Fall Dateitypen muss auf dem Server überprüft werden , die eine Kombination von MIME-Typ unter Verwendung von sowohl mit der Dateierweiterung und seine binäre Signatur ( ASP .NET , PHP , Ruby , Java ). In diesen Tabellen finden Sie möglicherweise auch Dateitypen und deren magische Zahlen, um eine robustere serverseitige Überprüfung durchzuführen.

Hier sind drei gute Informationen zu Datei-Uploads und Sicherheit.

BEARBEITEN: Möglicherweise kann die Überprüfung des Dateityps mithilfe seiner binären Signatur auch auf der Clientseite mithilfe von JavaScript (anstatt nur anhand der Erweiterung) mithilfe der HTML5-Datei-API durchgeführt werden. Die Datei muss jedoch auf dem Server überprüft werden, da es sich um einen böswilligen Benutzer handelt Sie können weiterhin Dateien hochladen, indem Sie eine benutzerdefinierte HTTP-Anfrage stellen.

Es gibt das Attribut accept für das Eingabe-Tag. Es ist jedoch in keiner Weise zuverlässig. Browser behandeln es höchstwahrscheinlich als "Vorschlag", was bedeutet, dass der Benutzer abhängig vom Dateimanager eine Vorauswahl hat, die nur die gewünschten Typen anzeigt. Sie können weiterhin "alle Dateien" auswählen und jede gewünschte Datei hochladen.

Zum Beispiel:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

Lesen Sie mehr in der HTML5-Spezifikation

Beachten Sie, dass es nur als "Hilfe" für den Benutzer verwendet werden soll, um die richtigen Dateien zu finden. Jeder Benutzer kann jede gewünschte Anfrage an Ihren Server senden. Sie müssen immer alles serverseitig validieren.

Die Antwort lautet also: Nein, Sie können nicht einschränken , aber Sie können eine Vorauswahl festlegen, aber Sie können sich nicht darauf verlassen.

Alternativ oder zusätzlich können Sie etwas Ähnliches tun, indem Sie den Dateinamen (Wert des Eingabefelds) mit JavaScript überprüfen. Dies ist jedoch Unsinn, da es keinen Schutz bietet und auch die Auswahl für den Benutzer nicht erleichtert. Es täuscht einen Webmaster möglicherweise nur vor, er sei geschützt, und öffnet eine Sicherheitslücke. Für Benutzer mit alternativen Dateierweiterungen (z. B. JPEG anstelle von JPG), Großbuchstaben oder gar keinen Dateierweiterungen (wie es auf Linux-Systemen üblich ist) kann dies ein Ärgernis sein.

Sie können das changeEreignis verwenden, um zu überwachen, was der Benutzer auswählt, und ihn an diesem Punkt zu benachrichtigen, dass die Datei nicht akzeptabel ist. Es schränkt die tatsächliche Liste der angezeigten Dateien nicht ein, ist jedoch neben dem schlecht unterstützten acceptAttribut die nächstgelegene, die Sie clientseitig ausführen können.

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

<input type="file" id="someId" />

JSFiddle

Ja, du hast recht. Mit HTML ist das unmöglich. Der Benutzer kann jede gewünschte Datei auswählen.

Sie können einen Teil des JavaScript- Codes schreiben , um zu vermeiden, dass eine Datei basierend auf ihrer Erweiterung gesendet wird. Beachten Sie jedoch, dass dies einen böswilligen Benutzer keinesfalls daran hindert, Dateien einzureichen, die er wirklich möchte.

Etwas wie:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML Quelltext:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Technisch gesehen können Sie das acceptAttribut (Alternative in HTML5 ) für das inputElement angeben , es wird jedoch nicht ordnungsgemäß unterstützt.

Verwenden inputTag mit acceptAttribute

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

Klicken Sie hier, um die neueste Browserkompatibilitätstabelle anzuzeigen

Live-Demo hier

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

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

Live-Demo hier

Es werden nur GIF, JPG und PNG angezeigt, Screenshot von Chrome Version 44

Ich weiß, das ist etwas 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;
}

Sie könnten dies tatsächlich mit Javascript tun, aber denken Sie daran, dass js clientseitig ist. Sie würden also Benutzer "warnen", welche Art von Dateien sie hochladen können, wenn Sie bestimmte Dateitypen vermeiden (einschränken oder einschränken möchten, wie Sie sagten), die Sie MÜSSEN Mach es serverseitig.

Schauen Sie sich dieses grundlegende Tutorial an, wenn Sie mit der serverseitigen Validierung beginnen möchten. Das gesamte Tutorial finden Sie auf dieser Seite .

Viel Glück!

Wie in den vorherigen Antworten erwähnt, können wir den Benutzer nicht darauf beschränken, Dateien nur für bestimmte Dateiformate auszuwählen. Es ist jedoch sehr praktisch, das Attribut accept tag on file in HTML zu verwenden.

Die Validierung muss auf der Serverseite erfolgen. Wir können es auch auf Client-Seite in js tun, aber es ist keine narrensichere Lösung. Wir müssen auf der Serverseite validieren.

Für diese Anforderungen bevorzuge ich das Entwicklungsframework für struts2 Java-Webanwendungen. Mit der integrierten Funktion zum Hochladen von Dateien ist das Hochladen von Dateien in struts2-basierte Web-Apps ein Kinderspiel. Erwähnen Sie einfach die Dateiformate, 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 Website von Struts nachlesen.

Ich kann Folgendes vorschlagen:

• Wenn Sie den Benutzer standardmäßig dazu bringen müssen, eine der Bilddateien auszuwählen, verwenden Sie accept = "image / *".

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

• Wenn Sie sich auf bestimmte Bildtypen beschränken möchten, verwenden Sie accept = "image / bmp, image / jpeg, image / png".

  <input type="file" accept="image/bmp, image/jpeg, image/png" />

• Wenn Sie sich auf bestimmte Typen beschränken möchten, verwenden Sie accept = ". bmp, .doc, .pdf".

  <input type="file" accept=".bmp, .doc, .pdf" />

• Sie können den Benutzer nicht darauf beschränken, den Dateifilter auf alle Dateien zu ändern. Überprüfen Sie daher immer den Dateityp in Skript und Server