最近使用到一个文件上传功能,发现恶意上传一个2G文件时,后台处理响应较慢,遂想到能否使用js来进行客户端的验证。但查阅网上多处资料,均使用 ActiveXObject("Scripting.FileSystemObject"); 的方法,该方法需要将Internet选项中安全级别提高,启用一个系统本身不推荐的选项,会出现如下非常不友好的提示:
所以这边并没有用到,而是寻求其他方法。
这边新的思路是img标签中的dynsrc属性。
在FireFox、Chrome浏览器中可以根据document.getElementById(“id_file”).files[0].size 获取上传文件的大小(字节数),而IE浏览器中不支持该属性,只能借助<img>标签的dynsrc属性,来间接实现获取文件的大小(但需要同意ActiveX控件的运行,但是不会引起上面的不友好、不安全的提示)。
具体方法如下:
转自 http://www.micmiu.com/lang/javascript/js-check-filesize/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="DEscription" contect="my code demo" />
<meta name="Author" contect="Michael@www.micmiu.com" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js check file size @ www.micmiu.com</title>
</head>
<body>
<img id="tempimg" dynsrc="" src="" style="display:none" />
<input type="file" name="file" id="fileuploade" size="40" />
<input type="button" name ="check" value="checkfilesize" onclick="checkfile()"/>
</body>
<script type="text/javascript">
var maxsize = 2*1024*1024;//2M
var errMsg = "上传的附件文件不能超过2M!!!";
var tipMsg = "您的浏览器暂不支持计算上传文件的大小,确保上传文件不要超过2M,建议使用IE、FireFox、Chrome浏览器。";
var browserCfg = {};
var ua = window.navigator.userAgent;
if (ua.indexOf("MSIE")>=1){
browserCfg.ie = true;
}else if(ua.indexOf("Firefox")>=1){
browserCfg.firefox = true;
}else if(ua.indexOf("Chrome")>=1){
browserCfg.chrome = true;
}
function checkfile(){
try{
var obj_file = document.getElementById("fileuploade");
if(obj_file.value==""){
alert("请先选择上传文件");
return;
}
var filesize = 0;
if(browserCfg.firefox || browserCfg.chrome ){
filesize = obj_file.files[0].size;
}else if(browserCfg.ie){
var obj_img = document.getElementById('tempimg');
obj_img.dynsrc=obj_file.value;
filesize = obj_img.fileSize;
}else{
alert(tipMsg);
return;
}
if(filesize==-1){
alert(tipMsg);
return;
}else if(filesize>maxsize){
alert(errMsg);
return;
}else{
alert("文件大小符合要求");
return;
}
}catch(e){
alert(e);
}
}
</script>
</html>
测试上传的文件大小:
IE8:
Chrome(19.0.1084.56 m):
FF(11.0):
- 大小: 5.2 KB
- 大小: 86.3 KB
- 大小: 38.3 KB
- 大小: 36.8 KB
- 大小: 32 KB
- 大小: 42.4 KB
分享到:
相关推荐
总结来说,JavaScript验证上传文件大小主要通过监听文件输入字段的`change`事件,获取文件对象,然后检查`size`属性。结合HTML和CSS,我们可以创建一个交互式的文件上传界面,提供友好的用户反馈。这个功能对于任何...
在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...
"JS上传文件大小验证"这个主题涉及到用户在网页上选择文件后,前端先进行文件大小的检查,以防止过大文件导致服务器压力或者用户体验问题。下面将详细阐述这一知识点。 一、文件API的使用 在HTML5中,File API提供...
除了文件格式,文件大小也是需要验证的重要因素,防止过大文件导致服务器处理压力。JavaScript可以获取到文件大小,但需要注意浏览器兼容性: ```javascript function validateFileSize(fileInput) { var files = ...
为了确保用户体验并防止服务器资源被滥用,前端通常需要对上传的文件进行一系列的验证,如文件大小、文件类型等。本文将详细介绍如何利用JavaScript(简称JS)来实现这些功能,并与Java Server Pages (JSP)结合使用...
本文将详细介绍使用JavaScript验证上传文件大小的简单方法,并对代码进行深入分析。 首先,我们需要了解的是,不同浏览器对文件操作的兼容性问题。例如,一些老旧的IE浏览器版本不支持`FileList`对象的`size`属性。...
- 文件大小限制应该同时在前端和后端进行,因为用户可以禁用JavaScript绕过前端验证。 - 考虑到不同的文件系统和浏览器差异,文件大小可能会有小数位,因此在比较时应适当放宽限制,比如设置为`maxFileSize + 1024`...
本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> [removed] var isIE = /msie/i.test...
通过以上介绍,我们可以看到使用JavaScript来控制上传文件大小的方法有多种。其中,利用HTML5的File API是最为现代化且实用的方式。这种方法不仅能够有效地控制文件大小,还能提供良好的用户体验。开发者可以根据...
<title>JS获取上传文件大小 <p id="fileSize"></p> <script src="js获取文件大小.js"> ``` 在这个例子中,我们创建了一个文件输入控件(`<input type="file" />`),并为它分配了`id`为`uploadFile`。同时...
本文将深入探讨如何利用JavaScript实现这样的功能,使上传的文件大小不受限,并提供进度条显示。 #### 关键技术点详解 ##### 1. 分块上传策略 由于浏览器和服务器之间的网络连接存在一定的限制,一次性上传大文件...
为了确保系统的安全性和提高用户体验,开发者通常需要对上传的文件进行一系列的检查,比如验证文件类型是否符合要求、文件大小是否超出限定值等。本文将详细介绍如何使用jQuery来实现这些功能。 #### 一、jQuery...
在JavaScript中,对用户上传的图片进行大小验证是常见的需求,尤其在网页应用中,确保图片大小在合理范围内可以优化加载速度,节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...
为了确保用户体验并减轻服务器负担,通常需要对上传文件进行预检查,包括文件大小限制以及文件类型的验证。下面将详细介绍如何使用JavaScript来实现这一功能。 #### 文件大小限制 对于文件大小的限制,可以采用...
2. **文件大小限制**:防止过大文件导致服务器压力或存储问题。 3. **非空验证**:确保所有必填字段都被填写。 4. **格式验证**:检查输入是否符合特定格式,如电子邮件地址、电话号码等。 综合以上,本项目的...
本文将详细介绍如何使用JavaScript来实现对上传文件大小的控制,特别是针对非图片文件类型的场景。 #### 一、背景与需求分析 在许多网站或应用程序中,都需要用户提供文件上传的功能,如文档、视频等。这些文件...
为了提供更好的用户体验,可以在客户端(如JavaScript)进行初步的文件大小验证,避免不必要的网络传输: ```javascript function validateFileSize(fileInput) { var fileSize = fileInput.files[0].size; if ...
因为客户端的JavaScript验证可以被绕过,所以服务器端仍然需要对上传的文件进行格式和大小的检查,以确保系统的安全性。 在处理文件验证时,还需要注意一些细节问题。例如,文档中提到的一个技术问题是在拷贝代码时...
在实际开发中,除了设置文件大小限制,还需要考虑其他安全措施,如验证文件类型、设置并发上传策略以及优化文件存储方案等。正确配置文件上传限制可以有效保护服务器,避免遭受恶意文件攻击,同时为用户提供良好的...