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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
javascript中字符串拼接需注意的问题
Jul 13 Javascript
简单的ajax连接库分享(不用jquery的ajax)
Jan 19 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
Adapter适配器模式在JavaScript设计模式编程中的运用分析
May 18 Javascript
javascript中json基础知识详解
Jan 19 Javascript
jQuery插件FusionCharts绘制的3D饼状图效果实例【附demo源码下载】
Mar 03 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
Jul 19 Javascript
vue-resource post数据时碰到Django csrf问题的解决
Mar 13 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
PHP 透明水印生成代码
2012/08/27 PHP
避免Smarty与CSS语法冲突的方法
2015/03/02 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
use jscript Create a SQL Server database
2007/06/16 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
javascript避免数字计算精度误差的方法详解
2014/03/05 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
NodeJS学习笔记之Connect中间件模块(一)
2015/01/27 NodeJs
js淡入淡出焦点图幻灯片效果代码分享
2015/09/08 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
详解基于Bootstrap扁平化的后台框架Ace
2015/11/27 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
关于数据与后端进行交流匹配(点亮星星)
2016/08/03 Javascript
JavaScript 用fetch 实现异步下载文件功能
2017/07/21 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
当vue路由变化时,改变导航栏的样式方法
2018/08/22 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
微信小程序仿通讯录功能
2020/04/09 Javascript
Vue+Element自定义纵向表格表头教程
2020/10/26 Javascript
python fabric实现远程部署
2017/01/05 Python
总结python实现父类调用两种方法的不同
2017/01/15 Python
Python中使用支持向量机SVM实践
2017/12/27 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
numba提升python运行速度的实例方法
2021/01/25 Python
HTML5之SVG 2D入门7—SVG元素的重用与引用
2013/01/30 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
Python面试题:Python里面如何生成随机数
2015/03/12 面试题
高中化学教学反思
2014/01/13 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
建设工地安全标语
2014/06/07 职场文书
2014年勤工助学工作总结
2014/11/24 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
2015年村党支部工作总结
2015/04/30 职场文书
Opencv中cv2.floodFill算法的使用
2021/06/18 Python