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

更新时间：2019年11月09日 13:09:45 作者：yo胡yo

这篇文章主要介绍了js实现的在本地预览图片功能,结合实例形式分析了JavaScript兼容移动web与IE浏览器的图片预览功能相关实现技巧,需要的朋友可以参考下

本文实例讲述了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切换特效与技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

JavaScript基于ChatGPT API实现划词翻译浏览器脚本
最近 GitHub 上有个基于 ChatGPT API 的浏览器脚本，openai-translator，短时间内 star 冲到了 9.7k，抛开 tauri 是使用 rust 部分，那浏览器部分实现还是比较简单的，今天我们就来手动实现一下
2023-03-03
微信小程序中的列表切换功能实例代码详解
这篇文章主要介绍了微信小程序中的列表切换功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2020-06-06
BootStrap表单控件之文本域textarea
这篇文章主要介绍了BootStrap表单控件之文本域textarea,需要的朋友可以参考下
2017-05-05
JavaScript引用类型Object常见用法实例分析
这篇文章主要介绍了JavaScript引用类型Object常见用法,简单描述了javascript基本数据类型,并结合实例形式分析了引用类型Object基本创建、赋值、访问属性等基本操作技巧,需要的朋友可以参考下
2018-08-08
js实现抽奖效果
本文主要介绍了js实现抽奖效果的方法实例。具有很好的参考价值。下面跟着小编一起来看下吧
2017-03-03
JavaScript闭包实例讲解
众所周知，JavaScript没有块级作用域，只有函数作用域。那就意味着定义在函数中的参数和变量在函数外部是不可见的，而在一个函数内部任何位置定义的变量，在该函数内部任何地方都可见
2014-04-04
Webpack 服务器端代码打包的示例代码
本篇文章主要介绍了Webpack 服务器端代码打包的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
Javascript模块模式分析
javascritp模式讲解全局变量是魔鬼。在YUI中，我们仅用两个全局变量：YAHOO和YAHOO_config。YUI的一切都是使用YAHOO对象级的成员或这个成员作用域内的变量。我们建议在你的应用程序也使用类似的规则。
2008-05-05
javascript将数组插入到另一个数组中的代码
下面的代码主要功能就是将数组arr2插入到数组arr1的index位置，需要的朋友可以参考下
2013-01-01
js判断上传文件类型判断FileUpload文件类型代码
这篇文章主要介绍了js判断上传文件类型判断FileUpload文件类型代码,需要的朋友可以参考下
2014-05-05