`
zhuchengzzcc
  • 浏览: 442902 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

真正好用的js验证上传文件大小(转)

阅读更多

    最近使用到一个文件上传功能,发现恶意上传一个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
分享到:
评论

相关推荐

    js验证上传文件大小

    总结来说,JavaScript验证上传文件大小主要通过监听文件输入字段的`change`事件,获取文件对象,然后检查`size`属性。结合HTML和CSS,我们可以创建一个交互式的文件上传界面,提供友好的用户反馈。这个功能对于任何...

    js验证上传图片 大小 格式

    在IT领域,特别是前端开发中,JavaScript(JS)被广泛应用于网页交互与数据验证,其中对上传图片的大小和格式进行验证是常见的需求之一。本文将深入解析如何使用JavaScript进行图片上传前的验证,包括检查图片格式、...

    JS上传文件大小验证.rar

    "JS上传文件大小验证"这个主题涉及到用户在网页上选择文件后,前端先进行文件大小的检查,以防止过大文件导致服务器压力或者用户体验问题。下面将详细阐述这一知识点。 一、文件API的使用 在HTML5中,File API提供...

    js验证上传swf文件格式的大小

    除了文件格式,文件大小也是需要验证的重要因素,防止过大文件导致服务器处理压力。JavaScript可以获取到文件大小,但需要注意浏览器兼容性: ```javascript function validateFileSize(fileInput) { var files = ...

    JS判断上传文件的大小类型等限制

    为了确保用户体验并防止服务器资源被滥用,前端通常需要对上传的文件进行一系列的验证,如文件大小、文件类型等。本文将详细介绍如何利用JavaScript(简称JS)来实现这些功能,并与Java Server Pages (JSP)结合使用...

    真正好用的js验证上传文件大小的简单方法

    本文将详细介绍使用JavaScript验证上传文件大小的简单方法,并对代码进行深入分析。 首先,我们需要了解的是,不同浏览器对文件操作的兼容性问题。例如,一些老旧的IE浏览器版本不支持`FileList`对象的`size`属性。...

    JavaScript判断上传文件大小的限制脚本

    - 文件大小限制应该同时在前端和后端进行,因为用户可以禁用JavaScript绕过前端验证。 - 考虑到不同的文件系统和浏览器差异,文件大小可能会有小数位,因此在比较时应适当放宽限制,比如设置为`maxFileSize + 1024`...

    javascript实现限制上传文件大小

    本篇介绍一个前端JS便捷判断上传文件大小的方法。 这个是比较好的 &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; [removed] var isIE = /msie/i.test...

    js控制上传文件的大小

    通过以上介绍,我们可以看到使用JavaScript来控制上传文件大小的方法有多种。其中,利用HTML5的File API是最为现代化且实用的方式。这种方法不仅能够有效地控制文件大小,还能提供良好的用户体验。开发者可以根据...

    js 获取上传文件大小

    &lt;title&gt;JS获取上传文件大小 &lt;p id="fileSize"&gt;&lt;/p&gt; &lt;script src="js获取文件大小.js"&gt; ``` 在这个例子中,我们创建了一个文件输入控件(`&lt;input type="file" /&gt;`),并为它分配了`id`为`uploadFile`。同时...

    js上传大文件,上传的文件大小不限

    本文将深入探讨如何利用JavaScript实现这样的功能,使上传的文件大小不受限,并提供进度条显示。 #### 关键技术点详解 ##### 1. 分块上传策略 由于浏览器和服务器之间的网络连接存在一定的限制,一次性上传大文件...

    jquery过滤上传文件的类型和限制文件的大小

    为了确保系统的安全性和提高用户体验,开发者通常需要对上传的文件进行一系列的检查,比如验证文件类型是否符合要求、文件大小是否超出限定值等。本文将详细介绍如何使用jQuery来实现这些功能。 #### 一、jQuery...

    JS上传图片大小验证.rar

    在JavaScript中,对用户上传的图片进行大小验证是常见的需求,尤其在网页应用中,确保图片大小在合理范围内可以优化加载速度,节省服务器资源。这个"JS上传图片大小验证.rar"压缩包可能包含了一个实现此类功能的示例...

    javascript控制上传文件的大小及文件类型

    为了确保用户体验并减轻服务器负担,通常需要对上传文件进行预检查,包括文件大小限制以及文件类型的验证。下面将详细介绍如何使用JavaScript来实现这一功能。 #### 文件大小限制 对于文件大小的限制,可以采用...

    上传文件验证表单

    2. **文件大小限制**:防止过大文件导致服务器压力或存储问题。 3. **非空验证**:确保所有必填字段都被填写。 4. **格式验证**:检查输入是否符合特定格式,如电子邮件地址、电话号码等。 综合以上,本项目的...

    用JavaScript限制上传文件的大小

    本文将详细介绍如何使用JavaScript来实现对上传文件大小的控制,特别是针对非图片文件类型的场景。 #### 一、背景与需求分析 在许多网站或应用程序中,都需要用户提供文件上传的功能,如文档、视频等。这些文件...

    C# 文件上传大小限制

    为了提供更好的用户体验,可以在客户端(如JavaScript)进行初步的文件大小验证,避免不必要的网络传输: ```javascript function validateFileSize(fileInput) { var fileSize = fileInput.files[0].size; if ...

    多个上传文件用js验证文件的格式和大小的方法(推荐)

    因为客户端的JavaScript验证可以被绕过,所以服务器端仍然需要对上传的文件进行格式和大小的检查,以确保系统的安全性。 在处理文件验证时,还需要注意一些细节问题。例如,文档中提到的一个技术问题是在拷贝代码时...

    设置FileUpload上传文件大小

    在实际开发中,除了设置文件大小限制,还需要考虑其他安全措施,如验证文件类型、设置并发上传策略以及优化文件存储方案等。正确配置文件上传限制可以有效保护服务器,避免遭受恶意文件攻击,同时为用户提供良好的...

Global site tag (gtag.js) - Google Analytics