Input accept="image/png" funktioniert nicht in Firefox

jsbin

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

Es wird erwartet, dass der Datei-dialog akzeptiert png-Dateien nur. Aber accept="image/png" funktioniert nicht auf Firefox. Wie kann ich es machen?
P. S. Es funktioniert in Chrome.

  • wir sind fast im Jahr 2015, und manche Browser unterstützen nicht die accept richtig. das ist peinlich.
InformationsquelleAutor Frank Fang | 2014-01-01
  1. 9

    Anscheinend gibt es eine spezifische Frage zu Firefox mit einigen Erweiterungen. Lesen Sie mehr über diesen Fehler hier.

    Den neuesten Stand dieser Fehler ist von ein paar Monaten und es scheint noch nicht gelöst werden. Für jetzt, ich würde vorschlagen, server-side-Datei zu überprüfen oder zumindest können Sie JavaScript verwenden, um zu überprüfen, die Erweiterung der Datei, bevor es wieder hochgeladen.

    • Server-side-Kontrollen sollten durchgeführt werden, unabhängig.
    • stimmte zu 100%, aber das löst nicht das OP-problem und es kann dazu führen, unnötigen Verkehr reduziert werden kann mit javascript.
    • Neben der Validierung Probleme, es ist ein UX-Problem, Benutzer hat möglicherweise navigieren durch viele Dateien, um zu finden, die man hochladen, anstatt die richtigen Dateien herausgefiltert.
    • Das Problem wird behoben, wenn Firefox 37 veröffentlicht ist - voraussichtlich im April 2015.
    InformationsquelleAutor Elad Stern
  2. 1

    Andere Antworten beschreiben, Firefox einfach nicht unterstützen type="image/png" noch. Stattdessen ignoriert das Attribut und nicht für eine Datei-filter. Mit type="image/*" funktionieren würde, aber dann wird der filter es ermöglichen würde, alle Bild-Dateien.

    Vielleicht die beste praktische Lösung ist die Verwendung von JavaScript-code, der überprüft, ob die Dateinamenerweiterung. Es muss nicht wirklich etwas beweisen, aber nahe zu 100% iger Sicherheit, PNG-Dateien haben Namen, die Endung mit .png und andere Dateien nicht. Beispiel-code (ersetzen das unhöflich alert durch eine Funktion, die entsprechend Ihrer UI-design):

    <form action="..."
enctype=multipart/form-data method=post
onsubmit="return checkPNG(document.getElementById('img'))">
<label for=img>Your image (.png):</label>
<input type=file id=img name=img accept=
"image/png, .png" onchange="return checkPNG(this)">
<input type=submit value=Send>
</form>
<div id=f></div>
<script>
function checkPNG(el) {
  if(el.value) {
    var parts = el.value.split('.');
    if(parts[parts.length - 1].toLowerCase() === 'png') {
      return true;
    } else {
      alert('Please specify a PNG file.');
      return false;
    }
  } else {
    return true;
  }
}
</script>

    Der Nachteil ist, dass, wenn scripting deaktiviert ist, wird Firefox akzeptiert keine Datei, obwohl accept="image/*" würde zumindest die Dateien einschränken, um image-Dateien. Allerdings JavaScript deaktiviert, ist wohl selten genug, im Vergleich mit den Schwierigkeiten der browser-sniffing benötigt, um server verschiedene type Attribute zu verschiedenen Browsern.

    Sollten Sie natürlich überprüfen Sie die Dateitypen auf dem server, bevor Sie etwas mit den Dateien, da jede Filterung von Datei-Typen wird einfach umgangen, durch Zufall oder absichtlich-

    • Vielen Dank, genau das was ich brauchte. Ich veränderte den code überprüfen Sie alle Erweiterungen aufgeführt, die in der original-accept-Attribut und gepostet, andere Antwort (Ihre Erwähnung).
    InformationsquelleAutor Jukka K. Korpela
  3. 1

    Machen Firefox teilweise Respekt das accept-Attribut können Sie diesen code verwenden, kopiert und modifiziert von Jukka K. Korpela Antwort (danke!+1), mit dem zusätzlichen bonus, wobei die ursprüngliche Element accept-Attribut, nicht ragt für PNGs, nicht nur eine Erweiterung.

    function checkFileExt(el) {
    var accept=el.getAttribute("accept");
    if(el.value && el.value!="" && accept && accept!="") {
        var parts = el.value.split('.');

        if(parts.length==1) {
            alert("File with no extension: '"+el.value+"'. Allowed: "+accept);
            return false;
        }

        var ext=parts[parts.length - 1].toLowerCase();

        accept=accept.split(',');
        var found=false;
        for(var i=0;i<accept.length;i++) {
            if("."+ext==accept[i]) {
                found=true;
                break;
            }
        }
        if(found) {
            return true;
        } else {
            alert("Wrong file: '"+el.value+"'. Allowed: "+accept);
            return false;
        }
    } else {
        return true;
    }
}

    Können Sie es verwenden, wie diese:

    <input name="fle_txt" value="" accept=".txt,.doc,.docx,.xls,.xlsx" onchange="checkFileExt(this);" type="file">

    Wird es nicht funktionieren mit den mime-Typen oder Gruppen wie image/* (es wird einfach ignorieren), aber könnte geändert werden, um fügen Sie eine Liste der Erweiterungen, die für jeden mime-Typ, [wie Anhängen .jpg,.jpeg dem array accept wenn er feststellt image/jpeg in es]

    InformationsquelleAutor FrancescoMM
  4. 0

    Lesen Sie Mozilla Doc hier
    Derzeit nicht von allen Browsern gehen, dass tief spezifische Dateiendung, aber Sie alle unterstützen Dateitypen, wie Bild - /video -.

    accept
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers:
A valid MIME type with no extensions
audio/* representing sound files HTML5
video/* representing video files HTML5
image/* representing image files HTML5
    InformationsquelleAutor Godinall
  5. -2

    den 'accept' - Attribut ist nicht richtig unterstützt von einem der großen Browser.

    Für die Formular-Validierung, die Sie verwenden sollten, php oder javascript.

    • Das ist eine wirklich irreführende Antwort.. w3schools etwas anderes sagt
    • du meinst w3fools? 😉
    • Wenn Sie nachlesen in meiner Antwort würden Sie sehen, dass in diesem Fall w3schools ist eigentlich richtig und dieses Attribut wird zwar unterstützt, aber nicht für alle Datei-Erweiterungen. Da es unterstützt in chrome und IE und einige extension in FF, das macht diese Antwort sehr irreführend.
    InformationsquelleAutor
Schreibe einen Kommentar