javascript实现限制上传⽂件⼤⼩
前⾔:
  项⽬中经常⽤到需要上传⽂件、照⽚等功能,同时需要限制所上传⽂件的⼤⼩。很多插件都会采⽤后台请求验证,前端Js 校验⽐较少。本篇介绍⼀个前端JS便捷判断上传⽂件⼤⼩的⽅法。
这个是⽐较好的
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var isIE = /st(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("不接受此⽂件类型!");
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("附件不存在,请重新输⼊!");
return false;
}
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = target.files[0].size;
}
var size = fileSize / 1024;
if (size > filemaxsize) {
alert("附件⼤⼩不能⼤于" + filemaxsize / 1024 + "M!");
target.value = "";
return false;
}
if (size <= 0) {
alert("附件⼤⼩不能为0M!");
target.value = "";
return false;
}
}
</script>
</head>
<body>
<input type="file" name="contractFileName" onchange="fileChange(this);"/>
</body>
</html>
下⾯的代码不建议使⽤
  代码很简单,关键就是怎么⽤JS拿到⽂件然后获取⽂件⼤⼩,进⽽去判断拦截。由于各种历史原因,IE的ActiveX控件因
素,获取⽂件的⽅法可能和其他浏览器有所不同,所以只需稍加判断即可。
JS代码:
<script type="text/javascript">
// 判断是否为IE浏览器: /st(navigator.userAgent) 为⼀个简单正则
var isIE = /st(navigator.userAgent) && !window.opera;
function fileChange(target){
var fileSize = 0;
if (isIE && !target.files) {  // IE浏览器
var filePath = target.value; // 获得上传⽂件的绝对路径
/**
* ActiveXObject 对象为IE和Opera所兼容的JS对象
* ⽤法:
*    var newObj = new ActiveXObject( pename[, location])
*    其中newObj是必选项。返回 ActiveXObject对象的变量名。
*    servername是必选项。提供该对象的应⽤程序的名称。
*    typename是必选项。要创建的对象的类型或类。
*    location是可选项。创建该对象的⽹络服务器的名称。
*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*  Scripting.FileSystemObject 为 IIS 内置组件,⽤于操作磁盘、⽂件夹或⽂本⽂件,
*  其中返回的 newObj ⽅法和属性⾮常的多
*  如:var file = newObj.CreateTextFile("C:\", true) 第⼆个参表⽰⽬标⽂件存在时是否覆盖
*  file.Write("写⼊内容");  file.Close();
*/
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// GetFile(path) ⽅法从磁盘获取⼀个⽂件并返回。
var file = fileSystem.GetFile(filePath);
fileSize = file.Size;  // ⽂件⼤⼩,单位:b
}
else {  // ⾮IE浏览器
fileSize = target.files[0].size;
}
var size = fileSize / 1024 / 1024;
if (size > 1) {
alert("附件不能⼤于1M");
indexof的用法javascript
}
}
</script>
HTML代码
复制代码代码如下:
<input type="file"  onchange="fileChange(this);"/>
  ⼀个简单、轻便、快捷的⽤JS代码来判断⽂件⼤⼩的⽅法就OK了,⾄于ActiveXObject对象感兴趣的可以去深究,它可以根据⼊参的不同返回不同的对象,通常该对象的功能和作⽤也是⾮常有⽤和强⼤的。
本⽂内容就到这⾥了,是不是⾮常简单实⽤的代码呢,希望⼤家能够喜欢。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。