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 相关文章推荐
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
基于jquery编写分页插件
Mar 07 Javascript
js 打开新页面在屏幕中间的实现方法
Nov 02 Javascript
浅谈angularjs $http提交数据探索
Jan 20 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
webpack4 处理SCSS的方法示例
Sep 03 Javascript
JS实现从对象获取对象中单个键值的方法示例
Jun 05 Javascript
node.js的http.createServer过程深入解析
Jun 06 Javascript
vue实现行列转换的一种方法
Aug 06 Javascript
VUE项目实现主题切换的多种方法
Nov 26 Vue.js
原生js中运算符及流程控制示例详解
Jan 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生成html分页列表的代码
2007/03/18 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php编写批量生成不重复的卡号密码代码
2015/05/14 PHP
详解PHP实现执行定时任务
2015/12/21 PHP
thinkPHP框架对接支付宝即时到账接口回调操作示例
2016/11/14 PHP
javascript 面向对象思想 附源码
2009/07/07 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
jquery获取自定义属性(attr和prop)实例介绍
2013/04/21 Javascript
前端微信支付js代码
2016/07/25 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
JavaScript中${pageContext.request.contextPath}取值问题及解决方案
2016/12/08 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
uploader秒传图片到服务器完整代码
2017/04/22 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
基于jquery的on和click的区别详解
2018/01/15 jQuery
JS实现可针对算术表达式求值的计算器功能示例
2018/09/04 Javascript
JavaScript实现指定数量的并发限制的示例代码
2020/03/10 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
2021/01/27 Vue.js
python使用7z解压软件备份文件脚本分享
2014/02/21 Python
python开发中range()函数用法实例分析
2015/11/12 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
python 读取摄像头数据并保存的实例
2018/08/03 Python
python 读取修改pcap包的例子
2019/07/23 Python
python requests使用socks5的例子
2019/07/25 Python
python爬虫之遍历单个域名
2019/11/20 Python
温泉秘密:Onsen Secret
2020/07/06 全球购物
农田水利实习自我鉴定
2013/09/19 职场文书
教师自我剖析材料
2014/09/29 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
创建文明城市倡议书
2015/04/28 职场文书
2015年度高中教师工作总结
2015/05/26 职场文书
预备党员考察意见范文
2015/06/01 职场文书
postgresql无序uuid性能测试及对数据库的影响
2021/06/11 PostgreSQL
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis