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

So führen Sie eine reibungslose if-Beurteilung in js durch

Artikel empfehlen

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 1) (Teil 35)

Der erste Artikel zum Thema Datensicherung und -w...

CSS erzielt den „Bottom Absorption“-Effekt im Footer

Wir stoßen häufig auf dieses Problem: Wie kann ma...

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Dieser Artikel beschreibt anhand von Beispielen d...

Untersuchung der Eingabetastenfunktion vom Typ „Datei“

So führen Sie eine reibungslose if-Beurteilung in js durch

Zusammenfassung der Methoden zum Überprüfen, ob der Port in Linux geöffnet ist

Eine kurze Erläuterung der Schriftarteinstellungen in Webseiten

Detaillierte Erklärung gängiger Docker-Befehle

So implementieren Sie einen Animationsübergangseffekt im Frontend

Implementierung und Optimierung von MySql-Unterabfragen IN

Analyse und Lösung des Problems, dass die MySQL-Instanz nicht gestartet werden kann

8 Gründe, warum Sie die Xfce-Desktopumgebung für Linux verwenden sollten

4 praktische Tipps für die Webseitengestaltung

Zusammenfassung gängiger Befehle für den Einstieg in die MySQL-Datenbankgrundlagen

Artikel empfehlen

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 1) (Teil 35)

CSS erzielt den „Bottom Absorption“-Effekt im Footer

Grundlegende Operationen von MySQL-Datentabellen: Operationen in der Tabellenstruktur, Beispielanalyse von Feldoperationen

Zusammenfassung der Vue3-Slot-Nutzung

Beheben einiger häufiger Probleme in CSS (Hack-Logo/fester Container/vertikale Zentrierung von Bildern)

So verwenden Sie Docker zum Bereitstellen eines Dubbo-Projekts

Lösung für das Problem mit transparenten Schriftarten nach dem Aktivieren von ClearType im Internet Explorer

So optimieren Sie die MySQL-Leistung durch langsame MySQL-Abfragen

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

Wie MySQL Milliarden von Datenverkehr unterstützt

Sechs Möglichkeiten zur Steigerung der Geschwindigkeit Ihrer Website

js, um einen einfachen Akkordeoneffekt zu erzielen

JavaScript zur Implementierung eines einfachen Web-Rechners

Details zur Verwendung regulärer Ausdrücke in MySQL

Gemeinsame Nutzung von zwei Plug-Ins zur Übersetzung von Webseiten