首页 > Web开发 > 详细

JS实现图片上传预览效果

时间:2021-09-13 17:53:57      阅读:25      评论:0      收藏:0      [点我收藏+]

<form>

<img ID="UserImg" /><br/>

<input type="file" name="fileimage" id="fileimage" style="display: none;"  />

<br />

<input id="Btn_UserImg" type="button" value="选择图片" />

<script>

function Urlimg(e) {

var url = null;

if (window.URL != null) {

url = window.URL.createObjectURL(e);

} else if (window.createObjectURL != null) {

url = window.createObjectURL(e);

} else if (window.webkitURL != null) {

url = window.webkitURL.createObjectURL(e);

}

return url;

};

document.getElementById("Btn_UserImg").onclick = function() {

document.getElementById("fileimage").click();

document.getElementById("fileimage").onchange = function() {

var img = Urlimg(document.getElementById("fileimage").files[0]);

document.getElementById("UserImg").setAttribute("src", img);

};

};

</script>

</form>

JS实现图片上传预览效果

原文:https://www.cnblogs.com/LanHai12/p/15258188.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!