JavaScript implementation limits upload file size _javascript tips

Objective:

Projects often use the need to upload files, photos and other features, but also need to limit the size of uploaded files. Many plug-ins will use background request verification, the front-end JS check relatively few. This article describes a front-end JS easy to determine the size of the upload file method.

The code is very simple, the key is how to use JS to get files and get file size, and then to judge interception. Because of various historical reasons, ie ActiveX control factors, the way to get files may be different from other browsers, so just a little judgment.

JS Code:

Copy Code code as follows:

<script type= "Text/javascript" >
Determine if it is 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 the uploaded file
/**
* ActiveXObject object for IE and opera are compatible with JS objects
Usage
* var newObj = new ActiveXObject (servername.typename[, location))
* Where newobj is a must option. Returns the variable name of the ActiveXObject object.
* ServerName is a must option. The name of the application that provided the object.
* TypeName is a must option. The type or class of the object to create.
* location is optional. The name of the network server on which the object was created.
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
* Scripting.FileSystemObject is an IIS built-in component that is used to manipulate disks, folders, or text files.
* The NEWOBJ methods and properties returned are very much
* such as: 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 obtains a file from the disk and returns it.
var file = Filesystem.getfile (FilePath);
fileSize = file.    Size; File size, in units: 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

Copy Code code as follows:

<input type= "File" style= "width:500px;" onchange= "filechange (this);" />

A simple, lightweight, fast use of JS code to determine the size of the file is OK, as for the ActiveXObject object of interest can go deep, it can be based on the different parameters to return different objects, usually the function and function of the object is also very useful and powerful.

This article is here, is not very simple and practical code, I hope you can enjoy.