HTML einen Filter anwenden

Lesezeit: 7 Minuten
<input type="file" name="userFile">

Wenn ich jetzt auf die Schaltfläche “Durchsuchen” klicke, zeigt der Dialog “Durchsuchen” alle Dateien an … was ist, wenn ich Dateitypen filtern möchte, sagen wir mal

  • nur Bilder bzw .png & .jpg & .gifs
  • nur Office-Datei wie .doc & .docx & .pps

wie es geht…

Ich denke, du suchst nach dem Accept-Parameter. Versuchen Sie, das funktioniert

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

HTML einen Filter anwenden
chao

Es gibt ein “Akzeptieren”-Attribut für Dateieingabesteuerelemente, in dem Sie die gewünschten Dateitypen angeben können. Soweit ich sehe, ignorieren viele Browser es jedoch gerne – die Dateitypen, die angegeben werden können, sind MIME-Typen, sodass ein streng korrekter Browser jede Datei unabhängig von der Erweiterung betrachten und sehen müsste, ob es sich um ein Bild handelt ( und wenn ja, um welche Art handelt es sich).

Aktualisieren: Es scheint, dass zumindest einige Versionen aller gängigen Browser unter Windows jetzt zumindest eine gewisse Unterstützung für das bieten accept Attribut. (Sogar IE unterstützt es ab Version 10.) Allerdings ist es noch ein bisschen früh, sich darauf zu verlassen, da IE 8 und 9 es immer noch nicht unterstützen. Und der Support ist im Allgemeinen etwas lückenhaft.

  • Chrome scheint volle Unterstützung zu haben. Es verwendet seine eigene integrierte Liste von Typen sowie die des Systems. Wenn also einer der Typen den Typ definiert, weiß Chrome, welche Dateien angezeigt werden sollen.
  • IE 10 unterstützt Dateierweiterungen wunderbar und MIME-Typen anständig. Es scheint jedoch nur die Systemzuordnung des MIME-Typs zu Erweiterungen zu verwenden … was im Grunde bedeutet, wenn etwas auf dem Computer des Benutzers diese Erweiterungen nicht mit den richtigen MIME-Typen registriert hat, zeigt IE keine Dateien dieser MIME-Typen an.
  • Opera scheint nur MIME-Typen zu unterstützen – bis zu dem Punkt, an dem Erweiterungen den Filter tatsächlich deaktivieren – und die Benutzeroberfläche für die Dateiauswahl ist scheiße. Sie müssen einen Typ auswählen, um die Dateien dieses Typs anzuzeigen.
  • Firefox scheint nur eine begrenzte Anzahl von Typen zu unterstützen und andere Typen sowie Erweiterungen zu ignorieren.
  • Ich habe Safari nicht und habe auch nicht vor, es herunterzuladen. Wenn jemand die Unterstützung von Safari dokumentieren könnte … Teilweise Unterstützung auf Safari. http://caniuse.com/#search=accept

Sie sollten das Attribut hinzufügen, damit Browser, die es unterstützen, dem Benutzer helfen können, die richtigen Dateien leichter zu finden. Aber ich würde trotzdem vorschlagen, dass Sie den Dateinamen überprüfen, nachdem die Datei ausgewählt wurde, und eine Fehlermeldung anzeigen, wenn eine Datei mit der falschen Erweiterung hochgeladen wird.

Und lassen Sie den Server natürlich unbedingt noch einmal überprüfen, ob die Datei der richtige Typ ist. Dateierweiterungen sind nur eine Namenskonvention und können leicht unterwandert werden. Und selbst wenn wir dem Browser vertrauen könnten (was wir nicht können) und selbst wenn er versucht hat, Dinge zu filtern, wie Sie es gefragt haben (was möglicherweise nicht der Fall ist), besteht die Chance, dass er dies tatsächlich überprüft .doc Datei wirklich ein Word-Dokument ist, ist gleich Null.

  • “Das Accept-Attribut wird von keinem der gängigen Browser richtig unterstützt.” (Zitiert aus w3schools.com/TAGS/att_input_accept.asp)

    – Nick

    19. August 2010 um 11:58 Uhr

  • Auf der zitierten Seite steht jetzt „Das Accept-Attribut wird in allen gängigen Browsern außer Internet Explorer und Safari unterstützt.“

    – Mopp

    19. September 12 um 14:13 Uhr

  • Funktioniert in Chrome für application/pdf. Sehen dieses Fehlerticket für Firefox. Für IE, gut wen kümmert IE.

    – das Blang

    21. August 13 um 14:50 Uhr


  • @mattblang: Die Leute, die große Websites betreiben, kümmern sich um den IE. 🙂 Es ist irgendwo zwischen 1/5 bis 1/2 des Marktes (je nachdem, wen Sie fragen).

    – chao

    21. August 13 um 14:54 Uhr


1643752331 774 HTML einen Filter anwenden
JMnerd

Es sollte verwenden MIME_type: Beispielsweise

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />

Dies wird nur akzeptiert *.xlsx Dateityp…

Die Liste der Mime-Typen finden Sie unter dem folgenden Link:
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

1643752331 672 HTML einen Filter anwenden
Stevemegson

Sie können nicht steuern, welche Dateien ausgewählt werden können, aber Sie können den Dateinamen mit Javascript lesen, nachdem die Datei ausgewählt wurde. Sie könnten dann eine Warnung anzeigen und/oder die Senden-Schaltfläche deaktivieren, wenn die Datei den falschen Typ hat. Denken Sie jedoch daran, dass Sie sich nicht darauf verlassen können, dass die Erweiterung Ihnen sagt, ob die Datei wirklich vom richtigen Typ ist oder nicht. Es sollte nur als Möglichkeit betrachtet werden, Benutzern zu helfen, die andernfalls Zeit mit dem Hochladen einer riesigen Datei verschwenden könnten, bevor sie feststellen, dass Sie diesen Dateityp nicht unterstützen.

Hier ist ein Beispielcode dafür. Es verwendet jQuery, aber Sie könnten dasselbe auch in einfachem Javascript tun.

$(function() {
    $('#inputId').change( function() {
        var filename = $(this).val();
        if ( ! /.txt$/.test(filename)) {
            alert('Please select a text file');
        }
    });
});

1643752332 41 HTML einen Filter anwenden
lmiguelmh

Sie könnten JavaScript verwenden. Bedenken Sie, dass das große Problem dabei mit JavaScript darin besteht, die Eingabedatei zurückzusetzen. Nun, dies beschränkt sich nur auf JPG (für andere Formate müssen Sie die Mime Typ und das magische Zahl):

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

Beachten Sie, dass dies auf den neuesten Versionen von Firefox und Chrome sowie auf IExplore 10 getestet wurde.

Eine vollständige Liste der Mime-Typen finden Sie bei Wikipedia.

Eine vollständige Liste der magischen Zahlen finden Sie bei Wikipedia.

Ich habe für die meisten Fälle der Dateifilterung einen einfachen Weg für die clientseitige Validierung geschaffen. Es ist eigentlich ganz einfach. Nun, bevor Sie versuchen, dies zu implementieren, verstehen Sie, dass der Server diese Datei überprüfen MUSS, da die Javascript- und HTML-Filterung in Fällen, in denen jemand die .js oder sogar den HTML-Code ändert, keine sichere Sache ist. Ich füge nicht das gesamte eigentliche Skript hinzu, weil ich gerne sehe, wie andere die Konzepte mit einem kreativen Geist implementieren, aber dies sind die Schritte, die ich unternommen habe und die zu funktionieren scheinen, bis ich eine bessere Antwort finde:

Erstellen Sie ein js-Objekt, das die Eingabe findet und verarbeitet.

Rufen Sie eine Funktion auf, z. B. OnClientUploadComplete für das AsyncFileUpload-Steuerelement von AjaxControlToolKit.

Deklarieren Sie innerhalb dieser Funktion eine boolesche Variable: bIsAccepted (auf false gesetzt) ​​und Zeichenfolge sFileName (nachdem Sie den Dateinamen aus den Argumenten erhalten haben).

In einer if..else-Anweisung

if(sFilename.indexOf(".(acceptedExtension1)") ||
   sFileName.indexOf(".(AcceptedExtension2)") )
{
   bIsAccepted = true;
}
else
{
   bIsAccepted = false;
}

dann

if(bIsAccepted)
{
//Process Data
}

Auf dem Server wird durch das Einrichten einer Liste akzeptierter Dateierweiterungen und das Durchlaufen und ähnliche Verarbeiten der Prozess kohärent und konsistent, sodass die Benutzeroberfläche und Code-Behind die Dateitypen in fast jeder Situation effektiv filtern können.

Da dies umgangen werden kann, indem der Name geändert wird, um eine andere Dateierweiterung als Teil des Namens zu haben, sollte auch der Mime-Typ überprüft werden, bevor er zur weiteren Verarbeitung an den Server gesendet wird.

            [http://www.webmaster-toolkit.com/mime-types.shtml][1]

Hoffe das hilft!

1643752332 835 HTML einen Filter anwenden
fantactuka

Du solltest benutzen eines der Plugins die eingebettetes Flash verwenden, da Sie dies nicht mit einfachem Javascript tun können

  • danke, aber nein danke … ich überprüfe lieber den Dateityp, nachdem er ausgewählt wurde … das wird mir eine Menge Arbeit ersparen

    – Mond

    19. August 10 um 11:17 Uhr

  • +1, weil dies die einzig praktikable Lösung ist (obwohl es schöner wäre, einige tatsächliche Links zu posten, anstatt eine Google-Suche, die sich ändern kann). @Moon Sie müssen danach (dh nach dem Hochladen) sowieso nach dem Dateityp suchen … Das einzige, was Sie nach der Auswahl lokal tun können, ist die Dateierweiterung zu überprüfen, die kein 100% zuverlässiger Indikator für den tatsächlichen Dateityp ist.

    – Pekka

    19. August 2010 um 11:33 Uhr


  • @Pekka웃: Ab HTML 5 kann das tatsächlich eine Reihe von Browsern liest die Bytes einer ausgewählten Datei. Funktioniert immer noch nicht in IE <8, aber da die Sicherheit sowieso eine doppelte Überprüfung erfordert, ist jede clientseitige Validierung wirklich nur eine Möglichkeit, den Benutzer davon abzuhalten, seine Zeit zu verschwenden. Und wenn sie immer noch IE8 verwenden, so langsam er auch ist, macht es ihnen anscheinend nichts aus, Zeit zu verschwenden ... :)

    – chao

    22. August 13 um 14:27 Uhr

.

732750cookie-checkHTML einen Filter anwenden

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy