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 相关文章推荐
浅谈javascript中call()、apply()、bind()的用法
Apr 20 Javascript
解决js图片加载时出现404的问题
Nov 30 Javascript
JS实现字符串转日期并比较大小实例分析
Dec 09 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
javascript基础知识讲解
Jan 11 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
Apr 01 Javascript
使用Vue开发一个实时性时间转换指令
Jan 17 Javascript
node的process以及child_process模块学习笔记
Mar 06 Javascript
10种JavaScript最常见的错误(小结)
Jun 21 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
vue添加锚点,实现滚动页面时锚点添加相应的class操作
Aug 10 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获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP实现查询两个数组中不同元素的方法
2016/02/23 PHP
定位地理位置PHP判断员工打卡签到经纬度是否在打卡之内
2019/05/23 PHP
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
2016/09/21 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
JS验证码实现代码
2017/09/14 Javascript
vue 项目如何引入微信sdk接口的方法
2017/12/18 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
150行Node.js实现的dns代理工具
2019/08/02 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python归并排序算法过程实例讲解
2020/11/04 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
关键字final的用法
2013/10/02 面试题
校长岗位职责
2013/11/26 职场文书
售后主管岗位职责
2013/12/08 职场文书
策划总监岗位职责
2014/02/16 职场文书
个人社会实践自我鉴定
2014/03/24 职场文书
毕业生找工作求职信
2014/08/05 职场文书
先进工作者个人总结
2015/02/15 职场文书
订货会主持词
2015/07/01 职场文书
欠条范文
2015/07/03 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Nginx 路由转发和反向代理location配置实现
2021/11/11 Servers
python_tkinter事件类型详情
2022/03/20 Python