Verbessern Sie die Datei-Upload-Steuerung mit jQuery

Bei der Verwendung von CSS zur Verschönerung von Formularelementen gab es noch nie eine gute Möglichkeit, die Datei-Upload-Steuerung zu verschönern. http://www.quirksmode.org/dom/inputfile.html (die Website scheint einen Fehler zu haben) bietet eine Methode zur Verschönerung der Datei-Upload-Steuerung. Inspiriert von dieser Methode habe ich meine eigenen Projekte kombiniert, um ihre Funktionen zu verbessern. Nach Verbesserungen weist sie die folgenden Eigenschaften auf:

1. Was der Benutzer sieht, ist keine Schaltfläche zum Hochladen einer Datei, sondern eine Schaltfläche;
2. Das Format von Bildern kann eingeschränkt werden;
3. Vom Benutzer ausgewählte Bilder können in einem bestimmten Bereich angezeigt werden (außer IE6, Safari und Oper);
4. Die Datei-Upload-Steuerung bleibt verfügbar, wenn der Benutzer js deaktiviert.

Ich habe es in ein jQuery-Plug-in gekapselt. Da es im Internet bereits ein Plug-in namens jQuery.fakeFile gibt, werde ich es zur Unterscheidung jQuery.liveFakeFile nennen. In diesem Artikel werden das Prinzip und die Verwendung dieser Methode vorgestellt.

1. Nachfrage

Die Anforderung ist sehr einfach, ihre Umsetzung erfordert jedoch bestimmte Fähigkeiten, die wie folgt kurz beschrieben werden:

1. Es ist erforderlich, dass das Steuerelement zum Hochladen von Dateien nicht angezeigt wird, sondern eine Schaltfläche zum Hochladen von Bildern. Wenn der Benutzer auf die Schaltfläche klickt, wird ein Bilddialogfeld angezeigt.
2. Nach Auswahl eines Bildes wird das Bild über der Schaltfläche angezeigt. Standardmäßig wird das Standardbild angezeigt.
3. Das Format des ausgewählten Bildes wird beurteilt. Sobald es den Anforderungen nicht entspricht, wird eine Fehlermeldung unter der Schaltfläche angezeigt und das Standardbild wird angezeigt.

2. Analyse

Durch Klicken auf die Schaltfläche können Sie den Effekt des Popup-Fensters zur Bildauswahl erkennen

Vor dem Text-Upload-Steuerelement befindet sich ein Eingabefeld. Inspiriert von Michael McGrady ( ljzcome hat diesen Artikel einmal übersetzt), erstellen wir eine Schaltfläche „Bild hochladen“, ändern dann die Deckkrafteigenschaft des Datei-Upload-Steuerelements und setzen sie auf 0. und verwenden Sie die Positionierungseigenschaft, um den Klickbereich über der Schaltfläche zu erstellen. Auf diese Weise scheint jeder Klick des Benutzers eine angeklickte Schaltfläche zu sein, tatsächlich handelt es sich jedoch um die Text-Upload-Steuerung selbst.

Vom Benutzer ausgewählte Bilder anzeigen

Das Anzeigen von Bildern scheint sehr einfach zu sein, es gibt jedoch Unterschiede zwischen den Browsern. IE6 kann Bilder nicht korrekt anzeigen, und IE7 kann sie mithilfe des Filters AlphaImageLoder anzeigen. Firefox kann Bilder nicht normal anzeigen, verfügt aber über eine Methode zum Anzeigen von Bildern – getAsDataURL(). Andere Browser Opera und Safari können Bilder nicht richtig anzeigen. Daher verwenden wir die Browser-Sniffing-Technologie, um verschiedene Browser separat zu verarbeiten und nur Browsern zu ermöglichen, die keine Bilder normal anzeigen können, um Text anzuzeigen.

Bildformat bestimmen

Sie müssen die Überprüfung des regulären Ausdrucks nur bestehen, wenn das Änderungsereignis der Datei-Upload-Steuerung ausgelöst wird. Sobald die Formatanforderungen erfüllt sind, wird das Bild oder der Eingabeaufforderungstext angezeigt, andernfalls wird eine Fehlermeldung angezeigt.

Usability-Analyse

Da js verwendet wird, um das Erscheinungsbild der Datei-Upload-Steuerung zu ändern, muss sichergestellt werden, dass Benutzer Bilder normal hochladen können, wenn js deaktiviert ist. Was wir also in die HTML-Struktur einfügen, sollte ein normales Datei-Upload-Steuerelement sein.