HTML点击图片更换图片

最新推荐文章于 2024-10-07 18:37:26 发布

Ruand~鳴

最新推荐文章于 2024-10-07 18:37:26 发布

阅读量6.1k

点赞数 3

文章标签： html

本文链接：https://blog.csdn.net/Ruyand/article/details/118000792

版权

HTML点击图片更换图片

大体思路：双点击img图片时，跳出文件选择器，过滤掉文件或文本之类的；
只能找到：图片，选择好图片后，显示到img标签。

<body>
	<div style="display: none" id="upPortraitDiv">
	<div>
	<input type="file" hidden name="portrait" id="upPortrait"><%--头像上传文本框--%>
	</div>
	</div>
	<form>
	    <div style="text-align: center">
	        <img src="默认图片的路径" id="userPicture" alt="头像" style="height: 150px; ">
	    </div>
	</form>
	<script>
		//通过点击img时，触发上传文本框；dblclick()双击事件
		$("#userPicture").dblclick(function () {
		    $("#upPortrait").click();
		});
		//图片文件 正则表达式过滤image/jpeg,image/png,image/jpg,image/gif,image/bmp
		var regexImageFilter = /^(?:image\/bmp|image\/gif|image\/jpg|image\/jpeg|image\/png)$/i;
		var imgReader = new FileReader();
		
		//文件读取器读取到文件后的回调事件
		imgReader.onload = function (event) {
		    //显示图片 base64编码的图片
		    $("#userPicture").attr("src", event.target.result);
		}
		
		$("#upPortraitDiv").on('change','input[type="file"]',function () {
		    //获取出文件选择器中的第一个文件
		    var file = $("#upPortrait").get(0).files[0];
		    //判断文件选择类型
		    if (regexImageFilter.test(file.type)) {
		        //读取文件转换成URL把图片转为Base64编码
		        imgReader.readAsDataURL(file);
		    } else {
		        layer.alert("请选择图片");
		    }
		});
	</script>
</body>