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知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 Javascript
js实现文本框只允许输入数字并限制数字大小的方法
Aug 19 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
JavaScript检查子字符串是否在字符串中的方法
Feb 03 Javascript
Javascript类型转换的规则实例解析
Feb 23 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
微信小程序五子棋游戏的棋盘,重置,对弈实现方法【附demo源码下载】
Feb 20 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
json 带斜杠时如何解析的实现
Aug 12 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
如何利用node转发请求详解
Sep 17 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输出全球各个时区列表的方法
2015/03/31 PHP
php实现文件预览功能
2017/05/23 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
2014/05/05 Javascript
JavaScript实现的双向跨域插件分享
2015/01/31 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
2016/05/16 Javascript
JavaScript:Array类型全面解析
2016/05/19 Javascript
jQuery ajax全局函数处理session过期后的ajax跳转问题
2016/06/03 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
微信小程序 图片宽度自适应的实现
2017/04/06 Javascript
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
2018/01/25 Javascript
jQuery实现动态显示select下拉列表数据的方法
2018/02/05 jQuery
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
手把手教你写一个微信小程序(推荐)
2018/10/17 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
python去除文件中重复的行实例
2018/06/29 Python
python 通过麦克风录音 生成wav文件的方法
2019/01/09 Python
pyqt远程批量执行Linux命令程序的方法
2019/02/14 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Python日志syslog使用原理详解
2020/02/18 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
纯css3无js实现的Android Logo(有简单动画)
2013/01/21 HTML / CSS
Europcar英国:英国汽车和货车租赁
2017/01/21 全球购物
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
MIKI HOUSE美国官方网上商店:日本领先的婴儿和儿童高级时装品牌
2020/06/21 全球购物
公司车辆维修管理制度
2015/08/05 职场文书
React 并发功能体验(前端的并发模式)
2021/07/01 Javascript