图片上传展示以及大小判断

最新推荐文章于 2020-07-11 11:44:15 发布

houzhihoujueL

最新推荐文章于 2020-07-11 11:44:15 发布

阅读量263

点赞数 1

文章标签：图片上传展示以及大小判断

本文链接：https://blog.csdn.net/houzhihoujueL/article/details/97130393

版权

图片上传展示以及大小判断

##js代码

<script>
    $('#viewPhoto2').on('change',function(e){
		//检测图片大小
		file = e.target.files[0];
		if(file.size/1024/1024 > 0.5){
			alert("请选择小于500k的图片");
			return;
		}
      //获取并记录图片的base64编码
      var reader = new FileReader();
      reader.readAsDataURL(e.target.files[0]); // 读出 base64
      reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
           var dataURL = reader.result;//base64
           // 显示图片
           $('#showImg').attr('src',dataURL);
           $('#viewPhoto').val(dataURL);
      };
});
</script>

##html代码

	<input type="file" value="" name="viewPhoto2" id="viewPhoto2" class="form-control" accept="image/*" />
</div>
<div class="col-sm-4">
	<img width="100px"  src="" alt="" id="showImg">
	<input type="hidden" value="$!{bsTicketRule.viewPhoto}" name="viewPhoto" id="viewPhoto" class="form-control" />
</div>