好资源导航 » 文章资讯 » js实现的在本地预览图片功能示例

js实现的在本地预览图片功能示例

2023-08-09 15:39:03 70

本文实例讲述了js实现的在本地预览图片功能。分享给大家供大家参考，具体如下：

移动web



上传文件：
预览：

兼容ie版本

functionchange(){
varpic=document.getElementById("preview");
varfile=document.getElementById("f");
varext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
//gif在IE浏览器暂时无法显示
if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
alert("文件必须为图片！");return;
}
//IE浏览器
if(document.all){
file.select();
varreallocalpath=document.selection.createRange().text;
varie6=/msie6/i.test(navigator.userAgent);
//IE6浏览器设置img的src为本地路径可以直接显示图片
if(ie6)pic.src=reallocalpath;
else{
//非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
pic.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\""+reallocalpath+"\")";
//设置img的src为base64编码的透明图片取消显示浏览器默认图片
pic.src='data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
}
}else{
html5Reader(file);
}
}
functionhtml5Reader(file){
varfile=file.files[0];
varreader=newFileReader();
reader.readAsDataURL(file);
reader.onload=function(e){
varpic=document.getElementById("preview");
pic.src=this.result;
}
}

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

js实现的在本地预览图片功能示例

热门推荐

随机推荐