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


Posted in Javascript onNovember 09, 2019

本文实例讲述了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吗?
Feb 24 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
Mar 17 Javascript
jquery获取自定义属性(attr和prop)实例介绍
Apr 21 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
jQuery时间轴插件使用详解
Jul 16 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
vue中destroyed方法的使用说明
Jul 21 Javascript
js实现可爱的气泡特效
Sep 05 Javascript
vue 取出v-for循环中的index值实例
Nov 09 #Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 #Javascript
Vue实现页面添加水印功能
Nov 09 #Javascript
vue 实现特定条件下绑定事件
Nov 09 #Javascript
Vue通过for循环随机生成不同的颜色或随机数的实例
Nov 09 #Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 #Javascript
在vue中动态添加class类进行显示隐藏实例
Nov 09 #Javascript
You might like
PHP函数utf8转gb2312编码
2006/12/21 PHP
Smarty+QUICKFORM小小演示
2007/02/25 PHP
php下几个常用的去空、分组、调试数组函数
2009/02/22 PHP
php中CI操作多个数据库的代码
2012/07/05 PHP
PHP向socket服务器收发数据的方法
2015/01/24 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
prototype.js的Ajax对象
2006/09/23 Javascript
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JQuery获取各种宽度、高度(format函数)实例
2013/03/04 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jquery使用hide方法隐藏指定id的元素
2015/03/30 Javascript
jquery+json实现数据二级联动的方法
2015/11/28 Javascript
AngularJS Module方法详解
2015/12/08 Javascript
详解JS面向对象编程
2016/01/24 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
微信小程序 欢迎页面的制作(源码下载)
2017/01/09 Javascript
JavaScript实现水平进度条拖拽效果
2017/01/18 Javascript
通过jsonp获取json数据实现AJAX跨域请求
2017/01/22 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
Angular实现双向折叠列表组件的示例代码
2017/11/21 Javascript
微信小程序基于slider组件动态修改标签透明度的方法示例
2017/12/04 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
echarts浮动显示单位的实现方法示例
2020/12/04 Javascript
vuex的使用步骤
2021/01/06 Vue.js
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[17:36]VG战队纪录片
2014/08/21 DOTA
[04:03]辉夜杯主赛事 12月25日RECAP精彩回顾
2015/12/26 DOTA
python实现IOU计算案例
2020/04/12 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
英国婴儿和儿童服装网站:Vertbaudet
2018/04/02 全球购物
老总助理工作岗位职责
2014/02/06 职场文书
出纳担保书范文
2014/04/02 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
小学校长个人总结
2015/03/03 职场文书
答谢酒会主持词
2015/07/02 职场文书