兼容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 相关文章推荐
用js实现手把手教你月入万刀(转贴)
Nov 07 Javascript
ext监听事件方法[初级篇]
Apr 27 Javascript
用jQuery简化JavaScript开发分析
Feb 19 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
js实现增加数字显示的环形进度条效果
Feb 05 Javascript
JavaScript实现左右下拉框动态增删示例
Mar 09 Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 Javascript
Vue组件之自定义事件的功能图解
Feb 01 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
Sep 25 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
第二节--PHP5 的对象模型
2006/11/16 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
JS 遮照层实现代码
2010/03/31 Javascript
Javascript下判断是否为闰年的Datetime包
2010/10/26 Javascript
DB.ASP 用Javascript写ASP很灵活很好用很easy
2011/07/31 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
JavaScript中实现map功能代码分享
2015/06/11 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
vue cli3.0结合echarts3.0与地图的使用方法示例
2019/03/26 Javascript
js实现表单项的全选、反选及删除操作示例
2020/06/05 Javascript
python求众数问题实例
2014/09/26 Python
Python编程中装饰器的使用示例解析
2016/06/20 Python
Python实现返回数组中第i小元素的方法示例
2017/12/04 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
python退出命令是什么?详解python退出方法
2018/12/10 Python
python执行CMD指令,并获取返回的方法
2018/12/19 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
完美解决pycharm 不显示代码提示问题
2020/06/02 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
CSS3 重置iphone浏览器按钮input,select等表单元素的默认样式
2014/10/11 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
2016/03/16 HTML / CSS
利用HTML5实现使用按钮控制背景音乐开关
2015/09/21 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
阿玛尼美妆英国官网:Giorgio Armani Beauty英国
2019/03/28 全球购物
彪马香港官方网上商店:PUMA香港
2020/12/06 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
高一学生评语大全
2014/04/25 职场文书
警察先进个人事迹材料
2014/05/16 职场文书
委托收款证明
2015/06/23 职场文书
生日寿星公答谢词
2015/09/29 职场文书
深入讲解数据库中Decimal类型的使用以及实现方法
2022/02/15 MySQL