纯javascript实现图片上传前预览，判断图片大小

最新推荐文章于 2022-06-16 08:57:45 发布

he20101020

最新推荐文章于 2022-06-16 08:57:45 发布

阅读量2.9k

点赞数

分类专栏： J2EE技术 JavaScript 文章标签： javascript实现图片预览 javascript获取文件大小

本文链接：https://blog.csdn.net/he20101020/article/details/17587429

版权

J2EE技术同时被 2 个专栏收录

26 篇文章 1 订阅

订阅专栏

JavaScript

24 篇文章 0 订阅

订阅专栏

本人在ie7-10下，火狐，谷歌下测试都可以通过，其他浏览器未测。判断图片大小用到了ActiveX控件，在ie9及其一下浏览器需要选择允许使用。

附一个0积分下载地址：http://download.csdn.net/detail/he20101020/6773273

代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>上传图片前，浏览时实现预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
    font-family: "宋体", Arial, Helvetica, sans-serif;
    font-size: 14px;
    background: #fff;
    color: #414141
}
 
#tit {
    margin: 10px 15px 20px 20px;
}
 
#prev {
    margin: 0px 0px 12px 0px;
}
 
#btn {
    padding: 2px 10px 2px 10px;
}
 
input {
    margin: 10px 0px 0px 0px;
}
</style>
</head>
<body>
    <div id="tit">
	<input type="file" name="carpoolpic1" id="carpoolpic1" οnchange="changesrc(this)"/>
        <h3>预览：</h3>
        <img src="" alt="" id="prev" height="192" width="300" />
    </div>
	当前选择文件大小：
	<div id="fileSize"></div>
</body>
 
<script type="text/javascript">
	
    var flag = true;
	/**预览图片*/
    function changesrc(sender) {
			sender_id = sender.id;
            var imgSrc = document.getElementById(sender_id).value;
            var t = document.getElementById(sender_id);
            if (imgSrc == "") {
                flag = false;
                return false;
            }
            if (checkType('jpg,bpm,png',imgSrc) == false) {
                document.getElementById(sender_id).value = "";
                alert("图片格式不正确!");
                flag = false;
                return false; //如果不是jpg返回false
            } else {
                var imgs = document.createElement("img");
                imgs.src = imgSrc;

				判断图片大小
                if (fileChange(sender) > 500 * 1024) {
                    alert("图片大小不能超过 500 KB!");
                    flag = false;
                    return false; //超过50K返回false
                }
				
                flag = true;
            }
			if (isFirefox = navigator.userAgent.indexOf("IE") > 0) {
				document.getElementById("prev").src = imgSrc;
			}else{
				document.getElementById("prev").src = window.URL.createObjectURL(t.files[0]);		
			}
    }
	
	/**判断图片类型*/
	function checkType(types,imgSrc){
		var typeArr = types.split(",");
		var rg;
		var length = typeArr.length;
		var sb=new StringBuilder(); 

		for(var i = 0, len = length; i < len; i++) {
			rg = '/(.*?)\.'+typeArr[i]+'$/.test(imgSrc.toLowerCase())';
			if(i+1 != length)
			rg = rg + " || ";
			sb.append(rg);
		}
		return eval(sb.toString());
	}

	/**够造StringBuilder*/
	function StringBuilder(){
	this._strings_=new Array;
	}
	StringBuilder.prototype.append=function(str){
	this._strings_.push(str);
	};
	StringBuilder.prototype.toString=function(){
	return this._strings_.join("");
	};
	


	//文件大小
	var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
	var sizeLabel = ["B", "KB", "MB", "GB"];
	//获取文件大小
	function fileChange(target) {

		var fileSize = 0;
		
		if (isIE && !target.files) {
			var filePath = target.value;
			var fileSystem = new ActiveXObject("Scripting.FileSystemObject");   
			var file = fileSystem.GetFile (filePath);
			fileSize = file.Size;
		} else {
			fileSize = target.files[0].size;
		}
		displayFileSize(fileSize);
		return fileSize;
	}

	//显示文件大小
	function displayFileSize(size) {
		var fileSize = document.getElementById("fileSize");
		fileSize.innerHTML = calFileSize(size);
	}
	
	//计算文件大小 返回格式化后的字符串 xx kb  xx Mb
	function calFileSize(size) {
		for (var index = 0; index < sizeLabel.length; index++) {
			
			if (size < 1024) {
				return round(size, 2) + sizeLabel[index];
			}
			
			size = size / 1024;
		}

		return round(size, 2) + sizeLabel[index];
	}

	function round(number, count) {
		return Math.round(number * Math.pow(10, count)) / Math.pow(10, count);
	}

</script>
</html>