HTML点击图片更换图片
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/bmpvar 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>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！