js实现图片上传，并回显图片，以及限制文件的大小及长宽

最新推荐文章于 2024-08-26 17:09:23 发布

前方太黑暗

最新推荐文章于 2024-08-26 17:09:23 发布

阅读量3.6k

点赞数 2

分类专栏： jquery 文章标签： js限制图片大小 js限制图片宽高

本文链接：https://blog.csdn.net/xcc_2269861428/article/details/84853004

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

示例：

<form id="pic04" encType="multipart/form-data" method="post">
  <div class="addbox">
	<img class="updateimg4 img-responsive" src="../img/picTip.png" 
      style="width:121px;height: 75px;"/>
	</div>
	<input type="file" id="picFile4" name="picFile4" style="display: none" />
</form>

其中 img-responsive 这个class是必须要有的，

限制图片大小不能超过30K，宽高为121x75

$("#picFile4").on("change",function(){
			var imgFile = this.files[0];
			var size = imgFile.size/1024;
			if(size > 30){
				layer.alert("图片超过30K");
				return false;
			}
			var fr = new FileReader();
			fr.onload = function(e) {
				  var data = e.target.result;
			      //加载图片获取图片真实宽度和高度
			      var image = new Image();
			      image.onload=function(){
			          var width = image.width;
			          var height = image.height;
			          if( width != 121 || height != 75){
			        	  layer.alert("图片尺寸不对，格式为(121 x 75)");
			        	  return false;
			          }else{
			        	  var imgs = document.getElementsByClassName('updateimg4');
						  imgs[imgs.length-1].src = fr.result; 
						  fengWu.uploadPic("pic04");
			          }
			      };
			      image.src= data
			};
			fr.readAsDataURL(imgFile);
		})

有喜欢的朋友可以关注下头条号《老徐聊技术》