FileAPI aktualisiert die Dateigröße nicht, wenn der Benutzer Dateiänderungen vornimmt (Nicht-Webkit-Browser)

8

Ich denke, ich würde das Problem zuerst anhand eines Beispiels demonstrieren,

jsfiddle: Ссылка (Getestet mit FF 12 und Chrome 18.0.1025.168)

Verwendung:

  • Laden Sie eine Textdatei von Ihrem lokalen Rechner.
  • Hit "Datei laden".
  • Drücken Sie "Dateigröße anzeigen" - notieren Sie die Größe.
  • modifizieren & amp; Speichern Sie die Textdatei auf Ihrem lokalen Computer.
  • Klicken Sie erneut auf "Dateigröße anzeigen". Beachten Sie, dass sich in Webkit-Browsern (Chrome) die Dateigröße ändert, in Firefox jedoch die Dateigröße nicht aktualisiert wurde

Nicht-Webkit-Browser aktualisieren ihr Größenattribut nicht, wenn Benutzer Änderungen an der ausgewählten lokalen Datei vornehmen, während Chrome dies zum Beispiel tut. Beide Browser aktualisieren den Inhalt der Datei.

Gibt es eine Möglichkeit, Firefox dazu zu bringen, die Dateigröße zu aktualisieren, ähnlich wie Chrome in dieser Situation?

Einfaches reales Beispiel:

Der Benutzer wählt eine Datei aus, die zu groß für das Formular ist, sie drücken die Senden-Taste und werden benachrichtigt, dass ihre Datei zu groß ist (über eine Warnung, "Größen" -Leiste, siehe unten),

Sie ändern die Datei lokal und drücken erneut submit.

In Chrome wird die Dateigröße aktualisiert. Wenn der Benutzer die Übermittlungsschaltfläche erneut anklickt, überprüft er erneut seine aktualisierte Größe und ermöglicht den Upload. In Firefox muss der Benutzer die Datei im Formular erneut auswählen, bevor sich die Dateigröße ändert.

Eine teilweise Problemumgehung für Firefox - @ ZER0's antworten

Beispiel für eine reale Welt (ausführlich):

Ein Zweck der Datei-API besteht darin, die Dateigröße auf der Client-Seite zu verifizieren, bevor sie auf einen Server hochgeladen wird, wenn ich mich nicht irre.

Berücksichtigen Sie das Szenario, in dem ein Uploadlimit von 2 MB in einem Formular vorhanden ist und der Benutzer eine 1 MB-Datei auswählt. Sowohl Firefox als auch Chrome sehen, dass die Dateigröße weniger als 2 MB beträgt, und fügen sie dem Formular hinzu. Lassen Sie uns auch sagen, dass es einen ordentlichen Balken gibt, der zeigt, wie groß eine Datei ist, die sie ausgewählt haben, und ob sie die Dateigröße überschreitet oder nicht:

Aber dann entscheidet der Benutzer, den Inhalt der Datei lokal zu ändern , bevor das Formular abschickt und die Größe über 2 MB erhöht.

In Google Chrome kann ich dies auf der Client-Seite elegant handhaben. Ich kann die Dateigröße erneut überprüfen, wenn der Benutzer das Formular absendet, und überprüfen, ob es tatsächlich noch unter 1 MB ist, bevor es an den Server gesendet wird. Aber bevor der Benutzer das Formular abschickt, kann ich in Chrome sogar so weit gehen, das Bild des kleinen Balkens dynamisch zu aktualisieren, da Änderungen lokal vorgenommen werden:

Dieser "Balken" (oder jedes andere Formular bei einer sofortigen Benachrichtigung, z. B. eine Warnung) ist nützlich, wenn der Benutzer ein großes Formular ausfüllt. Ich möchte, dass der Benutzer sofort weiß, wenn seine Datei zu groß ist und sie ihn dann korrigieren können, und nicht nur, wenn sie das Formular abschicken.

In Firefox, weil die Dateigröße niemals aktualisiert wird, lädt sie gerne die 2MB-Datei hoch und denkt, dass sie immer noch 1MB groß ist! Ich benutze serverseitige Logik, um die Dateigröße zu überprüfen, aber ich möchte lieber eine Server-Reise speichern.

Wie ich auf den Fehler gestoßen bin:

Die oben genannten Beispiele beziehen sich auf mehr Leute, da sich wahrscheinlich mehr Leute mit Dateiuploads in Formularen beschäftigt haben als mit Slice-Funktion in der Datei-API . Dies ist genau, wie ich auf das Problem stoße.

In meinem Formular wählt der Benutzer eine Datei aus und wenn sie submit drücken, werden nur die letzten 10.000 Bytes auf dem Bildschirm in textarea angezeigt, um zu bestätigen, dass es wirklich die gewünschte Datei ist.

Betrachten Sie eine Datei mit einer Größe von 50,000 bytes. Ein Benutzer wählt es im Formular aus, und sowohl Chrome als auch Firefox zeigen Bytes 40,000 - 50,000 in textarea .

Jetzt fügt der Benutzer der Datei Inhalt hinzu und hebt dieselbe Datei auf 70,000 bytes!

Google Chrome wird das textarea korrekt aktualisieren, um Bytes 60,000-70,000 zu enthalten. Da die Größe in Firefox konstant bleibt, werden nur Bytes im Bereich 40,000-50,000 angezeigt.

Bearbeiten: Die Datei jsfiddle wurde aktualisiert, um zu zeigen, dass FF den Inhalt der aktualisierten Datei immer noch lesen kann. Es ist nur so, dass sich die Dateigröße mit diesen neuen Inhalten nicht ändert.

Bearbeiten: Ссылка (Fehlerbericht)

Bearbeiten: Beispiele wurden hinzugefügt & amp; aktualisiert in Reaktion auf @ Eduárd Moldováns Kommentar & amp; @ ZER0's antworten . Danke!

    
Trevor Senior 23.05.2017, 12:00
quelle

1 Antwort

1

Es scheint, dass Sie die Eigenschaft size direkt erhalten, und weil der Wert in diesem Formularelement nicht geändert wird, ist es wahrscheinlich, dass Firefox die Eigenschaft size ebenfalls nicht aktualisiert.

Als Workaround können Sie length des gelesenen Inhalts überprüfen. Also anstelle von file.size habe evt.target.result.length .

Allerdings ist es definitiv ein Fehler für mich, also haben Sie es gut gemacht, es auf Bugzilla hinzuzufügen!

Aktualisieren : Sie können weiterhin die String-Version von Slice verwenden. Wenn Sie es vorziehen (oder result ist ein bestimmter Datentyp), können Sie von evt.target.result eine neue erstellen Blob -Objekt (Das Dateiobjekt verwendet diese Schnittstelle), wo Sie sowohl size -Eigenschaft als auch slice -Methode verwenden können.

    
ZER0 06.06.2012, 09:41
quelle