Preface:
It is often used in projects to upload files, photos and other functions, and the size of uploaded files needs to be limited. Many plug-ins will use background request verification, and front-end Js verification is relatively small. This article introduces a front-end JS method to easily judge the upload file size.
This is better
<html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <script type="text/javascript"> var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target, 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; break; } } } if (!isnext) { alert("This file type is not accepted!"); target.value = ""; return false; } } else { return false; } if (isIE && !target.files) { var filePath = target.value; var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); if (!fileSystem.FileExists(filePath)) { alert("Attachment does not exist, please re-enter!"); return false; } var file = fileSystem.GetFile(filePath); fileSize = file.Size; } else { fileSize = target.files[0].size; } var size = fileSize / 1024; if (size > filemaxsize) { alert("Attachment size cannot be greater than" + filemaxsize / 1024 + "M! "); target.value = ""; return false; } if (size <= 0) { alert("Attachment size cannot be 0M!"); target.value = ""; return false; } } </script></head><body><input type="file" name="contractFileName" onchange="fileChange(this);"/></body></html>The following code is not recommended
The code is very simple. The key is how to use JS to get the file and get the file size, and then judge and intercept it. Due to various historical reasons, IE's ActiveX control factors and the method of obtaining files may be different from other browsers, so just a little judgment is required.
JS code:
<script type="text/javascript"> // Determine whether it is an IE browser: /msie/i.test(navigator.userAgent) is a simple regular var isIE = /msie/i.test(navigator.userAgent) && !window.opera; function fileChange(target){ var fileSize = 0; if (isIE && !target.files) { // IE browser var filePath = target.value; // Get the absolute path to uploaded file/** * ActiveXObject The object is a JS object compatible with IE and Opera* Usage: * var newObj = new ActiveXObject( servername.typename[, location]) * where newObj is a required option. Returns the variable name of the ActiveXObject object. * servername is a must. Provides the name of the application that the object is. * typename is a must. The type or class of the object to be created. * location is optional. The name of the network server that created the object. *//////////////////////////////////////////////////////////////////////////////////////////////////// * Scripting.FileSystemObject is a built-in component of IIS, used to operate disks, folders, or text files, * There are many newObj methods and attributes returned in it* For example: var file = newObj.CreateTextFile("C:/test.txt", true) The second parameter indicates whether the target file is overwritten when it exists* file.Write("write content"); file.Close(); */ var fileSystem = new ActiveXObject("Scripting.FileSystemObject"); // The GetFile(path) method gets a file from disk and returns. var file = fileSystem.GetFile(filePath); fileSize = file.Size; // File size, unit: b } else { // Non-IE browser fileSize = target.files[0].size; } var size = fileSize / 1024 / 1024; if (size > 1) { alert("Attachment cannot be greater than 1M"); } }</script>HTML code
The code copy is as follows:
<input type="file" onchange="fileChange(this);"/>
A simple, lightweight and fast method to use JS code to judge file size is OK. As for those who are interested in ActiveXObject objects, you can go deeper. It can return different objects according to the parameters entered. Usually, the functions and functions of the object are also very useful and powerful.
That’s all for this article. Is it a very simple and practical code? I hope you like it.