js本地图片预览实现代码


Posted in Javascript onOctober 09, 2016

本文实例为大家分享了js本地图片预览实例,供大家参考,具体内容如下

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="divPreview">
<img id="imgHeadPhoto" src="noperson.jpg" style="width: 160px; height: 170px; border: solid 1px #d2e2e2;"
alt="" />
</div>
<input type="file" onchange="PreviewImage(this,'imgHeadPhoto','divPreview');" size="20" />
<script type="text/javascript">
//js本地图片预览,兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
function PreviewImage(fileObj, imgPreviewId, divPreviewId) {
var allowExtention = ".jpg,.bmp,.gif,.png"; //允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
var browserVersion = window.navigator.userAgent.toUpperCase();
if (allowExtention.indexOf(extention) > -1) {
if (fileObj.files) {//HTML5实现预览,兼容chrome、火狐7+等
if (window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
}
reader.readAsDataURL(fileObj.files[0]);
} else if (browserVersion.indexOf("SAFARI") > -1) {
alert("不支持Safari6.0以下浏览器的图片预览!");
}
} else if (browserVersion.indexOf("MSIE") > -1) {
if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
} else {//ie[7-9]
fileObj.select();
if (browserVersion.indexOf("MSIE 9") > -1)
fileObj.blur(); //不加上document.selection.createRange().text在ie9会拒绝访问
var newPreview = document.getElementById(divPreviewId + "New");
if (newPreview == null) {
newPreview = document.createElement("div");
newPreview.setAttribute("id", divPreviewId + "New");
newPreview.style.width = document.getElementById(imgPreviewId).width + "px";
newPreview.style.height = document.getElementById(imgPreviewId).height + "px";
newPreview.style.border = "solid 1px #d2e2e2";
}
newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
var tempDivPreview = document.getElementById(divPreviewId);
tempDivPreview.parentNode.insertBefore(newPreview, tempDivPreview);
tempDivPreview.style.display = "none";
}
} else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
if (firefoxVersion < 7) {//firefox7以下版本
document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
} else {//firefox7.0+ 
document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
}
} else {
document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
}
} else {
alert("仅支持" + allowExtention + "为后缀名的文件!");
fileObj.value = ""; //清空选中文件
if (browserVersion.indexOf("MSIE") > -1) {
fileObj.select();
document.selection.clear();
}
fileObj.outerHTML = fileObj.outerHTML;
}
return fileObj.value; //返回路径
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js内存泄露的几种情况详细探讨
May 31 Javascript
Jquery 模板数据绑定插件的使用方法详解
Jul 08 Javascript
jQuery 设置 CSS 属性示例介绍
Jan 16 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
Mar 05 Javascript
浅谈Node.js:fs文件系统模块
Dec 08 Javascript
很棒的vue弹窗组件
May 24 Javascript
简单实现jQuery轮播效果
Aug 18 jQuery
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
使用use注册Vue全局组件和全局指令的方法
Mar 08 Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
js html css实现复选框全选与反选
Oct 09 #Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 #Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 #Javascript
js基本算法:冒泡排序,二分查找的简单实例
Oct 08 #Javascript
javascript中获取元素标签中间的内容的实现方法
Oct 08 #Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 #Javascript
JS获取html元素的标记名实现方法
Oct 08 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
PHP实现批量生成App各种尺寸Logo
2015/03/19 PHP
jQuery+Ajax+PHP“喜欢”评级功能实现代码
2015/10/08 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
PHP时间戳和日期相互转换操作实例小结
2018/12/18 PHP
js 回车提交表单两种实现方法
2012/12/31 Javascript
JS中的构造函数详细解析
2014/03/10 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript中的类(Class)详细介绍
2014/12/30 Javascript
JavaScript操作HTML元素和样式的方法详解
2015/10/21 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详解微信小程序之scroll-view的flex布局问题
2019/01/16 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
Python实现模拟时钟代码推荐
2015/11/08 Python
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
python列表生成式与列表生成器的使用
2018/02/23 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
分析经典Python开发工程师面试题
2019/04/08 Python
Python之虚拟环境virtualenv,pipreqs生成项目依赖第三方包的方法
2019/07/23 Python
Django配置MySQL数据库的完整步骤
2019/09/07 Python
Python实例方法、类方法、静态方法区别详解
2020/09/05 Python
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
美国台面电器和厨具品牌:KitchenAid
2019/04/12 全球购物
SEPHORA丝芙兰德国官方购物网站:化妆品、护肤品和香水
2020/01/21 全球购物
行政经理岗位职责
2013/11/09 职场文书
超强台风观后感
2015/06/09 职场文书
公司酒会致辞
2015/07/30 职场文书
浅谈Nginx 中的两种限流方式
2021/03/31 Servers
关于python中模块和重载的问题
2021/11/02 Python