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

发布时间:2020-09-21 09:39:57 作者:yo胡yo
来源:脚本之家 阅读:144

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

移动web

<body>
<form enctype="multipart/form-data" name="form1">
上传文件:<input id="f" type="file" name="f" onchange="change()" />
预览:<img id="preview" alt="" name="pic" width="300" height="150" />
</form>
<script>
function change() {
   var pic = document.getElementById("preview");
   var file = document.getElementById("f");
   var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js获取文件名的后缀
   html5Reader(file);
 }
 function html5Reader(file){
   var file = file.files[0];
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(e){
     var pic = document.getElementById("preview");
     pic.src=this.result;
   }
 }
</script>  
</body>
</html>

兼容ie版本

function change() {
   var pic = document.getElementById("preview");
   var file = document.getElementById("f");
   var ext=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();
     var reallocalpath = document.selection.createRange().text;
     var ie6 = /msie 6/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);
   }
 }
 function html5Reader(file){
   var file = file.files[0];
   var reader = new FileReader();
   reader.readAsDataURL(file);
   reader.onload = function(e){
     var pic = document.getElementById("preview");
     pic.src=this.result;
   }
 }

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

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

推荐阅读:
  1. vue element upload实现图片本地预览
  2. 如何使用JavaScript实现预览本地上传图片功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js 本地预览图片 j

上一篇:关于Vue3.0的知识点分析

下一篇:Python的多继承C3算法解析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》