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构造器的实现代码小结
May 16 Javascript
js的回调函数详解
Jan 05 Javascript
JQuery实现左右滚动菜单特效
Sep 28 Javascript
详解javascript实现瀑布流列式布局
Jan 29 Javascript
jquery插件之文字间歇自动向上滚动效果代码
Feb 25 Javascript
JavaScript中判断数据类型的方法总结
May 24 Javascript
bootstrap table服务端实现分页效果
Aug 10 Javascript
浅谈Vue.js应用的四种AJAX请求数据模式
Aug 30 Javascript
Angular中的$watch方法详解
Sep 18 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
记录一次websocket封装的过程
Nov 23 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/31 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP PDOStatement::fetchObject讲解
2019/02/01 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JQuery each()函数如何优化循环DOM结构的性能
2012/12/10 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
jQuery过滤选择器详解
2015/01/13 Javascript
jquery使用经验小结
2015/05/20 Javascript
JQuery+CSS实现图片上放置按钮的方法
2015/05/29 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
Node.js开发教程之基于OnceIO框架实现文件上传和验证功能
2016/11/30 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue分页器组件编写方法详解
2019/06/28 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
[02:10]2018DOTA2亚洲邀请赛赛前采访-Liquid
2018/04/03 DOTA
Python多线程学习资料
2012/12/19 Python
python中文乱码的解决方法
2013/11/04 Python
探究Python中isalnum()方法的使用
2015/05/18 Python
利用python实现数据分析
2017/01/11 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
2014年居委会工作总结
2014/12/09 职场文书
公司开业致辞
2015/07/29 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
windows11选中自动复制怎么开启? Win11自动复制所选内容的方法
2022/07/23 数码科技