Vorwort:
Es wird häufig in Projekten verwendet, um Dateien, Fotos und andere Funktionen hochzuladen, und gleichzeitig müssen die Größe der hochgeladenen Dateien begrenzt werden. Viele Plug-Ins verwenden die Überprüfung der Hintergrundanforderung, und die JS-Überprüfung der Front-End-JS ist relativ gering. In diesem Artikel wird eine Front-End-JS-Methode eingeführt, um die Größe der Upload-Datei einfach zu beurteilen.
Das ist besser
<html> <head> <meta http-äquiv = "content-type" content = "text/html; charset = utf-8"/> <script type = "text/javascript"> var isie = /msie/i.Test(navigator.Useragent) &&! window.opera; Funktion filechange (Ziel, id) {var FileSize = 0; var filetypes = [".jpg", ".png", ".rar", ".txt", ".zip", ".doc", ".ppt", ".xls", ".pdf", ".docx", ".xlsx"]; var filepath = target.value; var fileMaxSize = 1024 * 2; // 2m if (filepath) {var isNext = false; var fileEnd = filepath.substring (filepath.indexof (".")); if (Filetypes && Filetypes.length> 0) {for (var i = 0; i <Filetypes.length; i ++) {if (Filetypes [i] == FileEnd) {isNext = true; brechen; }}} if (! isNext) {alert ("Dieser Dateityp wird nicht akzeptiert!"); Target.Value = ""; false zurückgeben; }} else {return false; } if (isie &&! target.files) {var filepath = target.value; var FileSystem = new ActiveXObject ("scripting.filesystemObject"); if (! filesystem.fileExists (filepath)) {alert ("Anhang existiert nicht, bitte treten Sie wieder ein!"); false zurückgeben; } var file = filesystem.getFile (filepath); FileSize = File.Size; } else {FileSize = target.files [0] .Size; } var size = ideSize / 1024; if (size> fileMaxSize) {alert ("Anhaftungsgröße kann nicht größer sein als" + fileMaxSize / 1024 + "m!"); Target.Value = ""; false zurückgeben; } if (Größe <= 0) {alert ("Anhanggröße kann nicht 0 m sein!"); Target.Value = ""; false zurückgeben; }} </script> </head> <body> <Eingabe type = "Datei" name = "contractFileName" onchange = "filechange (this);"/> </body> </html>Der folgende Code wird nicht empfohlen
Der Code ist sehr einfach. Der Schlüssel ist, wie Sie JS verwenden, um die Datei zu erhalten und die Dateigröße zu erhalten, und sie dann abzufangen. Aus verschiedenen historischen Gründen kann die ActiveX -Kontrollfaktoren von IE und die Methode zum Erhalt von Dateien von anderen Browsern unterscheiden, sodass nur ein wenig Urteilsvermögen erforderlich ist.
JS -Code:
<script type = "text/javaScript"> // Bestimmen Sie, ob es sich um einen IE -Browser: /msie/i.test(navigator.Useragent) handelt. Funktion filechange (Ziel) {var FileSize = 0; if (isie &&! target.files) {// IE Browser var filepath = target.value; // den absoluten Pfad zum hochgeladenen Datei erhalten/** * ActiveXObject Das Objekt ist ein JS -Objekt, das mit IE und Opera kompatibel ist. Gibt den variablen Namen des ActiveXObject -Objekts zurück. * Servername ist ein Muss. Bietet den Namen der Anwendung, die das Objekt ist. * TypName ist ein Muss. Der Typ oder die Klasse des zu erstellenden Objekts. * Der Ort ist optional. Der Name des Netzwerkservers, der das Objekt erstellt hat. *//////////////////////////////////////////////////////////////////////////////////////////////////// * Scripting.FileSystemObject is a built-in Komponente von IIS, verwendet zum Betrieb von Datenträgern, Ordnern oder Textdateien. Datei.close (); */ var filesystem = new ActiveXObject ("scripting.filesystemObject"); // Die GetFile (Path) -Methode erhält eine Datei von der Festplatte und kehrt zurück. var File = Dateisystem.getFile (filepath); FileSize = File.Size; // Dateigröße, Einheit: B} else {// Nicht-I-Browser-Filesize = target.files [0] .Size; } var size = ideSize / 1024 /1024; if (Größe> 1) {alert ("Anhang kann nicht größer als 1 m sein"); }} </script>HTML -Code
Die Codekopie lautet wie folgt:
<Eingabe type = "file" onchange = "filechange (this);"/>
Eine einfache, leichte und schnelle Methode zur Verwendung von JS -Code, um die Dateigröße zu beurteilen, ist in Ordnung. Für diejenigen, die an ActiveXObject -Objekten interessiert sind, können Sie tiefer gehen. Es kann verschiedene Objekte gemäß den eingegebenen Parametern zurückgeben. Normalerweise sind die Funktionen und Funktionen des Objekts auch sehr nützlich und leistungsfähig.
Das ist alles für diesen Artikel. Ist es ein sehr einfacher und praktischer Code? Ich hoffe es gefällt euch.