javaCrazy！
- 浏览: 189653 次
- 性别:
- 来自: 四川
-
文章分类
- 全部博客 (131)
- CMS内容管理系统 (3)
- 支付宝实习之旅 (1)
- javaSE (5)
- myEclipse (1)
- DWR (0)
- strut2 (6)
- spring (4)
- hibernate (6)
- jquery (26)
- extjs (0)
- oracle (1)
- flex (10)
- ajax (0)
- jsp (3)
- java (4)
- JavaScript (4)
- css+div (5)
- Java面试 (3)
- java设计模式 (2)
- Think in java 笔记 (2)
- dom4j (1)
- JDBC (1)
- 经典方法学习 (1)
- windows常用操作 (1)
- maven (1)
- 75道经典逻辑题及答案 (1)
- mysql (3)
- jqueryDemo(插件) (3)
- php (14)
- ubuntu (6)
- 记事本 (1)
- php缓存 (1)
- 编程思想 (5)
- wamp (1)
- android (2)
- xml (1)
最新评论
-
coosummer：
推荐使用http://buttoncssgenerator.c ...
CSS按钮（研究） -
javaCrazy！：
监听一个keyup事件
jquery 监听input输入值事件 -
丶月满灬西楼彡：
问个问题：假如用户在Input中输入了“12345”，但后来又 ...
jquery 监听input输入值事件
直接上代码
写道
<!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=''>
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
<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=''>
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
分享到：
发表评论
-
jquery多函数执行
2014-01-07 15:33 9281、Array.prototype.slice.apply ... -
js关闭浏览器兼容性问题
2013-09-13 10:23 7671、ie,chrome下面代码都可以 window.ope ... -
jquery弹框插件（自定义easy-box）
2013-08-30 14:39 10021、插件代码easy-box.js $.ext ... -
50个jQuery代码段帮你成为更出色的JS开发者
2013-08-29 15:06 9050. 如何创建嵌套的过滤器： -
jquery验证插件进一步进行封装（easy-check）
2013-07-29 14:48 21951、easy-check.js，核心代码如下（要运行dem ... -
php echo jquery代码
2013-07-09 11:30 1490话不多少，直接贴上代码 echo "<sc ... -
既可输入也可以选择的（input+select）兼容ie6+,chrome,firefox
2012-11-24 17:25 1203直接上代码 <html> <hea ... -
js或jquery导致ie6下，gif卡帧（不动）
2012-11-21 14:01 3117IE6下当JS触发GIF格式图片时，经常会出现GIF图片动几下 ... -
js解决IE遮罩层无法遮罩select
2012-11-07 15:23 9261、包含js (function(a){a.fn.bg ... -
div固定顶部或底部，IE下postion:fixed问题
2012-11-07 14:14 823像你所遇到的问题一样， IE6浏览器有太多的bug让制作 ... -
公告连续滚动js
2012-11-05 13:46 2147<!DOCTYPE html PUBLIC " ... -
jquery获取各种高度
2012-09-19 20:57 11542alert($(window).height()); ... -
ie6下js的onmouseover和onmouseout事件连续触发问题的解决方法
2012-09-17 11:23 889解决HTML内部元素的Mouse ... -
jquery设置select选中，获取select选中的值 和文本
2012-09-11 17:03 1776选中select选项，根据value var pid ... -
jquery图片剪切（插件）
2012-09-09 12:28 1832我用过的jquery图片剪切插件有jcrop， imgsel ... -
jquery图片左右滚动，代码很简洁
2012-09-03 17:46 727<!DOCTYPE html PUBLIC &qu ... -
jquery 监听input输入值事件
2012-08-22 17:24 18477<html> <head&g ... -
jquery 可扩展滚动移动demo
2012-08-06 22:53 1039<!DOCTYPE html PUBLIC &qu ... -
jquery 设置select选中
2012-08-02 10:01 807jquery代码 $(document).rea ... -
jquery ajax之函数里面ajax请求,不能返回return 值
2012-07-31 21:45 2728代码 代码如下: fu ...
相关推荐
在上面的代码中，如果用户使用的是 Firefox、Chrome、Opera 或 Safari 浏览器，那么将跳转到指定的 URL 否则，将跳转到另外的 URL。 浏览器兼容性处理是 Web 开发中一个非常重要的问题，因为不同的浏览器可能会有...
标题提到的"firebug for IE6+, Firefox, Opera, Safari and Chrome"，意味着这是一个跨浏览器的解决方案，旨在为开发者提供在不同浏览器上调试和优化网页的能力。 Firebug Lite是Firebug的轻量级版本，适用于不支持...
它在手机触屏设备上表现出色，同时也兼容桌面浏览器，包括IE8及更高版本，Firefox和Chrome。iscroll的核心功能是提供高性能、低内存占用的滚动解决方案，适用于各种网页组件，如滚动列表、轮播图等。 **iscroll的...
这篇博文《图片延迟加载(兼容IE&FF&Chrome)》可能详细介绍了如何实现这一技术，虽然具体的实现代码没有直接提供，但从标签“源码”我们可以推测，博主可能分享了一段JavaScript代码来实现这个功能。`temp.html`可能...
"JS导入导出Excel 兼容IE、Firefox、Chrome等浏览器"这一技术主题，聚焦于如何使用JavaScript（JS）在各种浏览器环境下处理Excel文件，包括古老的Internet Explorer（IE）、Firefox以及Chrome。下面我们将深入探讨这...
对于"图片瀑布流jQuery代码兼容ie6+"，这意味着这个代码片段旨在利用jQuery来创建瀑布流布局，并且兼容Internet Explorer浏览器从版本6到最新的现代浏览器，如Chrome和Firefox。 在实现图片瀑布流的过程中，主要...
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括古老的Internet Explorer ...
本篇文章将详细探讨如何实现“图片上传预览”功能，并确保在IE 6/7/8及Firefox（包括新版）等浏览器中的兼容性。 首先，我们需要了解不同浏览器对HTML5新特性的支持情况。现代浏览器如Chrome、Safari和新版Firefox...
在网页开发中，确保图片在不同的浏览器上，如Internet Explorer（IE）、Firefox和Chrome中能够正确缩放是一项重要任务。由于各个浏览器对CSS、JavaScript等技术的实现可能存在差异，因此需要采用兼容性处理来实现这...
在网页开发中，兼容性问题是一个常见且棘手的问题，尤其是涉及到老版本的Internet Explorer（IE6、IE7、IE8）和Firefox等其他浏览器。这些浏览器对于CSS（层叠样式表）的解析方式存在差异，导致在不同浏览器中页面...
本文将详细探讨如何创建一个兼容多种浏览器的纯CSS加载动画，包括Safari、Chrome、Mozilla Firefox、Opera以及IE10及以上的版本。 首先，我们需要了解CSS的特性。CSS（Cascading Style Sheets）是一种样式表语言，...
这个代码的核心在于其跨浏览器兼容性，确保在多种主流浏览器上都能正常运行，包括老版本的Internet Explorer（IE6、IE7、IE8）以及Firefox、Opera和Chrome。下面我们将深入探讨这些知识点。 首先，我们来了解**QQ...
本教程将探讨如何实现一个图片滚动展示功能，并在单击时使用prettyPhoto插件实现图片放大，同时确保代码兼容多种浏览器，包括IE6、IE7、IE8、Firefox和Chrome。 首先，`prettyPhoto`是一个流行的jQuery插件，它为...
### IE6、IE7、IE8、Firefox、Chrome、Safari的CSS Hack兼容一览表 在Web开发过程中，为了确保网站能够在不同的浏览器中保持一致的显示效果，开发者常常需要运用CSS Hack技术来解决浏览器间的兼容性问题。CSS Hack...
其次，考虑到兼容性，该对话框需要在IE6+及主流浏览器（如Chrome、Firefox）中正常工作。这需要开发者对各种浏览器之间的差异有深入理解，特别是对于老旧的IE浏览器，它们在CSS样式支持、JavaScript API实现和盒模型...
"iFrame高度自适应终极解决方案（兼容IE7,8,9 Firefox3.6+,Chrome 12+）"这个标题所指向的，就是一种跨浏览器的策略，确保iFrame内容无论何时更新，都能自动调整其高度，从而避免滚动条的出现和内容溢出。...
在任兼容ie6~ie9 firefox 谷歌”指的是一个基于jQuery实现的弹出对话框插件，它具有拖动功能，并且兼容Internet Explorer 6到9，以及Firefox和Google Chrome等现代浏览器。这个插件可能采用了jQuery的核心功能，如...
本篇文章将探讨如何使用CSS选择器来优化代码，使之适用于IE7+、Firefox 3、Opera 9以及Chrome等主流浏览器。 首先，理解CSS选择器的性能差异是优化的关键。CSS选择器分为多个级别，从基础的ID选择器(#id)、类选择器...
这里特别提到了对IE6到IE9以及Chrome和Firefox等主流浏览器的兼容性，这意味着该代码经过优化，可以在多种浏览器环境中稳定运行。 在描述中，“轻量简洁容易上手使用”表明这个jQuery插件或者代码片段设计得非常...