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.lazyload.js实现页面延迟载入
Dec 22 Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 Javascript
JavaScript阻止浏览器返回按钮的方法
Mar 18 Javascript
JavaScript入门基础
Aug 12 Javascript
JavaScript实现的CRC32函数示例
Nov 23 Javascript
微信小程序获取用户openId的实现方法
May 23 Javascript
使用ajax的post同步执行(实现方法)
Dec 21 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
用javascript实现倒计时效果
Feb 09 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学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP变量的作用范围实例讲解
2020/12/22 PHP
JS阻止用户多次提交示例代码
2014/03/26 Javascript
JS不能跨域借助jquery获取IP地址的方法
2014/08/20 Javascript
jquery.cookie实现的客户端购物车操作实例
2015/12/24 Javascript
微信小程序开发探究
2016/12/27 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
ReactJs设置css样式的方法
2017/06/08 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
Puppet的一些技巧
2018/09/17 Javascript
vue实现的双向数据绑定操作示例
2018/12/04 Javascript
如何能分清npm cnpm npx nvm
2019/01/17 Javascript
JavaScript中filter的用法实例分析
2019/02/27 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
[57:22]完美世界DOTA2联赛PWL S2 FTD vs PXG 第二场 11.27
2020/12/01 DOTA
python获取外网ip地址的方法总结
2015/07/02 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
查看jupyter notebook每个单元格运行时间实例
2020/04/22 Python
python中的错误如何查看
2020/07/08 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
Vision Directa智利眼镜网:框架眼镜、隐形眼镜和名牌太阳眼镜
2016/11/23 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
如何将一个描述日期或日期/时间的字符串转换为一个Date对象
2015/10/13 面试题
工作鉴定评语
2014/05/04 职场文书
生日宴会策划方案
2014/06/03 职场文书
计生个人工作总结
2015/02/28 职场文书
最感人的道歉情书
2015/05/12 职场文书
2015年度内部审计工作总结
2015/05/20 职场文书
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis