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

最新推荐文章于 2024-04-18 00:52:22 发布

java_runner

最新推荐文章于 2024-04-18 00:52:22 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/jiahengzhang/article/details/52512551

版权

Js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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" οnchange="previewImg(this, 'img1')" />
<input type="file" id="file2" name="file2" οnchange="checkImgSize(this)" />
<input type="file" id="file3" name="file3" οnchange="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>

java_runner

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js上传前预览图片，检测上传文件大小

js上传图片前预览图片，检测上传图片大小，检测上传文件大小js图片上传预览，上传文件大小// 预览图片function previewImg(file, imgId){ if(file.value==""){ return; } var img = document.getElementById(imgId); if (file.files && f
复制链接

扫一扫