js上传前预览图片，检测上传文件大小

最新推荐文章于 2020-12-24 23:38:46 发布

java_runner

最新推荐文章于 2020-12-24 23:38:46 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Js 文章标签： javascript input file图片预览 js获取文件大小

本文链接：https://blog.youkuaiyun.com/jiahengzhang/article/details/52512551

Js 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的简单解决方案，用于在上传之前预览图片，并检查图片和其他文件的大小。该方法适用于网页应用中，能够帮助开发者确保用户上传的文件符合指定的要求。

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

js上传图片前预览图片，检测上传图片大小，检测上传文件大小

<span style="font-family: Arial, Helvetica, sans-serif;"><!DOCTYPE html></span>

<html>
<head>
<meta charset="UTF-8" />
<title>js图片上传预览，上传文件大小</title>
</head>
<body>
<img id="img1" />
<input type="file" id="file1" name="file1" onchange="previewImg(this, 'img1')" />
<input type="file" id="file2" name="file2" onchange="checkImgSize(this)" />
<input type="file" id="file3" name="file3" onchange="checkFileSize(this)" />
<script type="text/javascript">
// 预览图片
function previewImg(file, imgId){
	if(file.value==""){
		return;
	}
	var img = document.getElementById(imgId);
	if (file.files && file.files[0]) {
		var reader = new FileReader();
		reader.readAsDataURL(file.files[0]);
		reader.onload = function(evt){
			var reg = /^data:base64,/;
			var res = evt.target.result;
			if(reg.test(res)){
				res = res.replace(reg, "data:"+file.files[0].type+";base64,");
			}
			img.src = res;
			s = res;
		};
	} else {
		img.src = file.value;
	}
}
// 检测上传图片大小
function checkImgSize(file) {
	var size = 0;
	if (file.files && file.files[0]) {
		size = file.files[0].size;
	} else {
		var img = document.createElement("IMG");
		img.src = file.value;
		var timer = setInterval(function(){
			if (img.fileSize > 0) {
				clearInterval(timer);
			}
			size = img.fileSize;
		}, 100);
	}
	alert("图片大小：" + size);
}
// 检测上传文件大小
function checkFileSize(file) {
	var size = 0;
	if (file.files && file.files[0]) {
		size = file.files[0].size;
		//file.files[0].type	// 文件类型
		//file.files[0].name	// 文件名
	} else {
		file.select();
		var url = document.selection.createRange().text;
		try{
			var fso = new ActiveXObject("Scripting.FileSystemObject");
			size = fso.GetFile(url).size;
		} catch(e) {  
			alert('如果你用的是ie8 请将安全级别调低！设置-》安全');  
		} 
	}
	alert("文件大小：" + size);
}
</script>
</body>
</html>