兼容IE和FF的图片上传前预览js代码


Posted in Javascript onMay 28, 2013

效果图如下:
兼容IE和FF的图片上传前预览js代码 
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>本地图片预览</title> 
<style type="text/css"> 
#preview{width:100px;height:100px;border:1px solid #000;overflow:hidden;} 
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);} 
</style> 
<script type="text/javascript"> 
function previewImage(file) 
{ 
var MAXWIDTH = 100; 
var MAXHEIGHT = 100; 
var div = document.getElementById('preview'); 
if (file.files && file.files[0]) 
{ 
div.innerHTML = '<img id=imghead>'; 
var img = document.getElementById('imghead'); 
img.onload = function(){ 
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
img.width = rect.width; 
img.height = rect.height; 
img.style.marginLeft = rect.left+'px'; 
img.style.marginTop = rect.top+'px'; 
} 
var reader = new FileReader(); 
reader.onload = function(evt){img.src = evt.target.result;} 
reader.readAsDataURL(file.files[0]); 
} 
else 
{ 
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="'; 
file.select(); 
var src = document.selection.createRange().text; 
div.innerHTML = '<img id=imghead>'; 
var img = document.getElementById('imghead'); 
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src; 
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); 
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height); 
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;margin-left:"+rect.left+"px;"+sFilter+src+"\"'></div>"; 
} 
} 
function clacImgZoomParam( maxWidth, maxHeight, width, height ){ 
var param = {top:0, left:0, width:width, height:height}; 
if( width>maxWidth || height>maxHeight ) 
{ 
rateWidth = width / maxWidth; 
rateHeight = height / maxHeight; if( rateWidth > rateHeight ) 
{ 
param.width = maxWidth; 
param.height = Math.round(height / rateWidth); 
}else 
{ 
param.width = Math.round(width / rateHeight); 
param.height = maxHeight; 
} 
} 
param.left = Math.round((maxWidth - param.width) / 2); 
param.top = Math.round((maxHeight - param.height) / 2); 
return param; 
} 
</script> 
</head> 
<body> 
<div id="preview"> 
<img id="imghead" width=100 height=100 border=0 src='../images/head01_big.jpg'> 
</div> 
<br/> 
<input type="file" onchange="previewImage(this)" /> 
</body> 
</html>
Javascript 相关文章推荐
JQuery 插件模板 制作jquery插件的朋友可以参考下
Mar 17 Javascript
基于jquery的blockui插件显示弹出层
Apr 14 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
使用jquery实现div的tab切换实例代码
May 27 Javascript
深入理解js数组的sort排序
May 28 Javascript
完美实现js选项卡切换效果(二)
Mar 08 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
js 动态校验开始结束时间的实现代码
May 25 Javascript
JS数据类型判断的几种常用方法
Jul 07 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 Javascript
Extjs中ComboBoxTree实现的下拉框树效果(自写)
May 28 #Javascript
jQuery实现可拖动的浮动层完整代码
May 27 #Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 #Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
May 27 #Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 #Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 #Javascript
div当滚动到页面顶部的时候固定在顶部实例代码
May 27 #Javascript
You might like
10条PHP编程习惯助你找工作
2008/09/29 PHP
php 上传功能实例代码
2010/04/13 PHP
初步介绍PHP扩展开发经验分享
2012/09/06 PHP
PHP发送短信代码分享
2015/08/11 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
JavaScript中的事件处理
2008/01/16 Javascript
用JavaScript实现UrlEncode和UrlDecode的脚本代码
2008/07/23 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
JavaScript中的Array对象使用说明
2011/01/17 Javascript
JavaScript使用focus()设置焦点失败的解决方法
2014/09/03 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
Javascript调用函数方法的几种方式介绍
2015/03/20 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
2016/06/21 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
vue router自动判断左右翻页转场动画效果
2017/10/10 Javascript
js根据需要计算数组中重复出现某个元素的个数
2019/01/18 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
python定义类self用法实例解析
2020/01/22 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
Python网络爬虫四大选择器用法原理总结
2020/06/01 Python
JVM是一个编译程序还是解释程序
2012/09/11 面试题
自主招生自荐信指南
2014/02/04 职场文书
《只有一个地球》教学反思
2014/02/14 职场文书
党员违纪检讨书
2014/02/18 职场文书
《窗前的气球》教学反思
2014/04/07 职场文书
目标责任书格式
2014/07/28 职场文书
入党培养人考察意见
2015/06/08 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
Python中使用Lambda函数的5种用法
2021/04/01 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js