JavaScript实现图片实时预览功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现图片实时预览功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1400字，纯文字阅读大概需要3分钟。
内容图文
本篇文章给大家分享的内容是JavaScript实现图片实时预览功能，有着一定的参考价值，有需要的朋友可以参考一下FileReader 获取图片的base64 代码 并预览
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.img{
width: 170px;
height: 170px;
border: 1px solid lightgray;
}
.img>img{
width: 170px;
height: 170px;
}
</style>
</head>
<body>
<input type="file" id="file">
<p class="img">
<img src="" alt="" id="img">
</p>
<script>
window.onload=function () {
/*请将input的id设为file img标签的id设为img**/
var file=document.getElementById('file');
var img=document.getElementById('img');
var dataImg;
file.onchange=function () {
//判断是否支持FileReader
if(typeof FileReader==="undefined"){
alert('您的浏览器不支持');
}
//读取文件
var result=this.files[0];
//获取文件类型
var type=result.type;
if(!type){
alert('请上传图片');
}else {
//判断图片类型
type=type.split('/')[1];
console.log(type);
//使用正则匹配判断是否是jpeg,jpg,png,bmp,gif图片类型
if(type.match(/^(jpg|bmp|png|jpeg|gif)$/g)){
console.log(result);
//声明一个fileReader
var reader=new FileReader();
//以数据流的形式读取图片
reader.readAsDataURL(result);
//图片读取完毕后执行操作
reader.onload=function (e) {
//获取图片读取结果
dataImg=this.result;
//加载图爿到标签上
img.setAttribute('src',dataImg);
};
}
else {
alert("请上传图片格式");
//清空input
this.value='';
}
}
}
}
</script>
</body>
</html>相关推荐：
以上就是JavaScript实现图片实时预览功能的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的JavaScript实现图片实时预览功能全部内容，希望文章能够帮你解决JavaScript实现图片实时预览功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】