上传图片怎么限制大小

上传图片怎么限制大小

图书封面上传图片的时候怎么限制图片尺寸的大小喃

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕阿慧 2020-08-01 11:50:34

同学你好,同学可以参考下面的代码:

body中代码参考如下:

http://img1.sycdn.imooc.com//climg/5f24e629090992a504130117.jpg

script中代码参考如下:

<script>
	/**图片的大小要求,不超过80KB,单位是KB*/
	var size = "80";
	/**图片的类型要求(即文件后缀)*/
	var suffix = "jpg,png";
	/**图片宽高要求,单位是px*/
	var width = "640";
	var height = "530";
	var suffixList = "";
	function preImg(fileid, previewid) {
		var name = document.getElementById(fileid).files[0].name;
		var curSize = document.getElementById(fileid).files[0].size;
		var curSuffix = name.split(".")[1];
		console.info(document.getElementById(fileid).files[0])
		//1、判断图片大小
		if (curSize > size * 1024) {
			alert("图片大小不能超过" + size + "KB!");
			return;
		}
		/*
		2、 判断图片的尺寸(即宽和高)
		  现在的问题是,如何读取图片的宽、高
		  我这里是通过实例化Image对象、加载src 来获取。
		 */
		var reader = new FileReader();
		var picpreview = document.getElementById(previewid);
		console.log(picpreview);
		
		reader.onload = function(e) {
			var data = e.target.result;
			//加载图片获取图片真实宽度和高度
			var image = new Image();
			image.onload = function() {
				var w = image.width;
				var h = image.height;
				if (w != width || h != height) {
					alert("请上传尺寸为尺寸为" + width + "x" + height
							+ "的图片,当前图片尺寸为" + w + "x" + h + "!");
					return;
				}
			}
			image.src = data;
			picpreview.innerHTML = "<img src='"+this.result+"' class='' style='height: 282px;' />";
		}
		reader.readAsDataURL(document.getElementById(fileid).files[0]);
	}
</script>

如果我的回答解决了你的疑惑,请采纳!祝学习愉快!

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师