js判断上传文件大小

最新推荐文章于 2021-06-07 13:26:42 发布

pg_guo

最新推荐文章于 2021-06-07 13:26:42 发布

阅读量565

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.youkuaiyun.com/pg_guo/article/details/8292766

版权

JavaScript 同时被 2 个专栏收录

12 篇文章

订阅专栏

HTML

4 篇文章

订阅专栏

本文介绍了一种在前端通过不同浏览器特性来判断用户上传文件大小的方法。对于IE浏览器使用了ActiveXObject来获取文件大小，而对于Chrome浏览器则利用了File API。通过这两种方式可以有效地在前端实现文件大小的限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在前端判断<input type="file" />的大小，

在IE下使用了ActiveObject（弊端：需要客户点击运行控件）

在Chrome下使用了fileObj.files[0].size（这个方法可行，但是还不知道什么原理，有待考究）

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>js判断上传文件大小</title>
</head>

<body>
	<input type="file" id="fileId" />
	<input type="button" value="IE下使用" οnclick="showSizeInIE()"/>
	<input type="button" value="Chrome下使用" οnclick="showSizeInChrome()" />
</body>
<script type="text/javascript">
	function showSizeInIE()
	{
		var fileObj = document.getElementById("fileId");
		var fso = new ActiveXObject("Scripting.FileSystemObject");
		var f = fso.getFile(fileObj.value);
		alert(f.size + " bytes");
	}
	function showSizeInChrome()
	{
		var fileObj = document.getElementById("fileId");
		alert(fileObj.files[0].size + " bytes");
	}
</script>
</html>