Untersuchung der Eingabetastenfunktion vom Typ „Datei“

Untersuchung der Eingabetastenfunktion vom Typ „Datei“
<br />Beim Hochladen auf manchen Websites wird nach dem Klicken auf die Schaltfläche „Durchsuchen“ ein Dialogfeld [Datei auswählen] angezeigt. Oft müssen wir nur Bilddateien hochladen, dann werden im Popup-Dialogfeld [Datei auswählen] nur Dateien mit entsprechenden Bildformaten angezeigt und alle anderen Dateiformate werden herausgefiltert und nicht angezeigt.
Beispiel: http://www.youku.com/v1.0.0326/v/swf/up.swf
Dies ist die Video-Upload-Option von Youku, die die FLASH-Methode verwendet, um die Anzeige von Nicht-Videodateien zu verhindern.
FLASH ist in diesem Zusammenhang im Allgemeinen wie hier beschrieben.
importiere flash.net.FileReferenceList;
var fileRef:FileReferenceList = neue FileReferenceList();
var alleTypen:Array = [];
var browse type:Objekt = neues Objekt();
Browsing type.description = "Browsingtyp (*.mp3)";
Durchsuchen Sie Typ.Erweiterung = "*.mp3";
allTypes.push(Typ durchsuchen);
fileRef.browse(alleTypen);
Können wir für das <input type="File"> auf unserer Webseite auch ein Popup-Fenster implementieren, um den Dateityp einzuschränken?
Die aktuelle Lösung besteht darin, Benutzer durch Überwachung daran zu erinnern, dass das Format der hochgeladenen Datei falsch ist.
<Skript>
Funktion check(){
var Dateipfad=Pfad.Wert
Dateipfad=Dateipfad.Teilzeichenfolge(Dateipfad.letzterIndexvon('.') 1,Dateipfad.Länge)
wenn(Dateipfad != 'jpg' und Dateipfad != 'gif')
alert("Es können nur Bilder im JPG- oder GIF-Format hochgeladen werden")
}
</Skript>
<input type=file name=path onpropertychange="check()"> (Es können nur Bilder im JPG- oder GIF-Format hochgeladen werden)
<Skript>
Funktion ck(Objekt){wenn(Objekt.Wert.Länge>0){
var af="jpg,gif,png,zip,rar,txt,htm";
if(eval("with(obj.value)if(!/" af.split(",").join("|") "/ig.test(substring(lastIndexOf('.') 1,length)))1;")){alert("Erlaubte Dateitypen:\n" af);obj.createTextRange().execCommand('delete')};
}}
</Skript>
<form>
<Eingabetyp=Dateiname=Pfad onpropertychange="ck(this)"/></form>
Dieser Effekt ist jedoch offensichtlich nicht so gut wie das Benutzererlebnis von FLASH. Bei dieser Art des FLASH-Uploads ist besondere Vorsicht geboten.

<<:  Beheben Sie das Problem, dass weder der Repository- noch der Tag-Name leer sind, nachdem Docker ein neues Image geladen hat.

>>:  Detaillierte Erläuterung der DOM-Stileinstellungen in vier Reaktionskomponenten

Artikel empfehlen

Beispiel für eine Nginx-Cache-Konfiguration

Beim Entwickeln und Debuggen einer Webanwendung s...

So sichern Sie das Skript für Linux-Server automatisch (MySQL, Sicherung von Anhängen)

1. Erstellen Sie die Skriptdatei backup.sh #!/bin...

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten: c...

Fassen Sie die Probleme zusammen, die bei der Verwendung der Vue Element-Benutzeroberfläche auftreten

Inhaltsverzeichnis 1. DateTimePicker Datumsauswah...

Detaillierte Erklärung des Unterschieds zwischen temporärer MySQL-Tabelle und Partitionstabelle

Temporäre Tabellen und Speichertabellen Eine Spei...

Typora-Codeblock-Farbabgleich und Implementierungscode für die Titelseriennummer

Wirkung: Der Titel hat eine eigene Seriennummer, ...

Zusammenfassung der benutzerdefinierten JavaScript-Objektmethoden

Inhaltsverzeichnis 1. Verwenden Sie Objekt, um ei...

Erste Schritte mit MySQL - Konzepte

1. Was ist das? MySQL ist das beliebteste relatio...

Einführung in die drei wesentlichen Protokolle für MySQL-Datenbankinterviews

Inhaltsverzeichnis 1. Redo-Log (Transaktionsproto...

Docker-Container-Protokollanalyse

Containerprotokolle anzeigen Verwenden Sie zunäch...

Detaillierte Erläuterung der Installation und Konfiguration von ROS in CLion2020.1.3 unter Ubuntu20.04

1. CLion herunterladen, installieren und aktivier...

Wie viele Daten können in einer MySQL-Tabelle gespeichert werden?

Programmierer müssen sich viel mit MySQL befassen...

Lösungen für Kompatibilitätsprobleme mit virtuellen VMware-Workstation-Maschinen

Wie lassen sich Kompatibilitätsprobleme mit virtu...

Implementierung eines Random Roll Callers basierend auf JavaScript

In diesem Artikel wird der spezifische JavaScript...

Verwenden Sie das Docker-Buildkit, um ein Docker-Image zu erstellen, das auf dem Raspberry Pi verwendet werden kann

Docker-Installation curl -fsSL https://get.docker...