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 相关文章推荐
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
js跑步算法的实现代码
Dec 04 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
Apr 16 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
VueJs与ReactJS和AngularJS的异同点
Dec 12 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
Feb 27 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
vue实现路由监听和参数监听
Oct 29 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 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
main.php
2006/12/09 PHP
MySQL中create table语句的基本语法是
2007/01/15 PHP
mysql 性能的检查和优化方法
2009/06/21 PHP
如何用php获取文件名后缀
2013/06/09 PHP
PHP-FPM运行状态的实时查看及监控详解
2016/11/18 PHP
PHP编程 SSO详细介绍及简单实例
2017/01/13 PHP
浅谈thinkphp5 instance 的简单实现
2017/07/30 PHP
Ruffy javascript 学习笔记
2009/11/30 Javascript
IE和Firefox下event事件杂谈
2009/12/18 Javascript
JS 事件绑定函数代码
2010/04/28 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
JavaScript实现网页上的浮动广告的简单方法
2013/06/14 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
Windows8下搭建Node.js开发环境教程
2014/09/03 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
基于jquery实现的仿优酷图片轮播特效代码
2016/01/13 Javascript
javascript实现起伏的水波背景效果
2016/05/16 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
2016/06/15 Javascript
各种选择框jQuery的选中方法(实例讲解)
2017/06/27 jQuery
JavaScript中防止微信浏览器被整体拖动的方法
2017/08/25 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python网页解析器使用实例详解
2020/05/30 Python
酒店行政人事部经理职务说明书
2014/02/26 职场文书
三方股份合作协议书
2014/10/13 职场文书
如何开发一个渐进式Web应用程序PWA
2021/05/10 Javascript
MySQL中的布尔值,怎么存储false或true
2021/06/04 MySQL
使用python求解迷宫问题的三种实现方法
2022/03/17 Python