IE下上传图片时预览图片(1.IE7/IE8测试通过; 2.能根据比例缩放图片 )
来源:互联网 发布:vb word替换文字颜色 编辑:程序博客网 时间:2024/05/18 03:25
<!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> <title></title> <script type="text/javascript"> function ShowImage(path, id) { //思路: //1.当上传控件路径变化时, 先将图片所在div隐藏; //2.将上传控件的值传给图片div的滤镜路径; //3.将图片div的sizingMethod设置为'image'——目的是取得图片的原始大小。因为此状态下与图片的原始大小是一致的。 //4.过一小会儿获取div的宽高——之所以要过一会儿, 原因是图片显示出来需要时间。 var picid = document.getElementById(id); picid.style.visibility = "hidden"; //处理前是原图,先将其隐藏, picid.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path; picid.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image"; setTimeout(function () { setImg(picid); }, 100); //过一小会获取div的宽高. } function setImg(obj) { //5.如果取得的图片比预定义的宽高小, 原图显示就好了。 //6.否则如果图片太大, 将图片的sizingMethod改成"scale", 这样图片可以缩放的形式显示; //7.宽比例=预定义宽/实际宽, 高比例=预定义高/实际高; //8.取其中一个较小的作为显示时的显示比例; //9.计算得到显示时的实际宽高, 并赋给图片div对应的属性; var width_img; var height_img; obj.style.visibility = "visible"; width_img=obj.offsetWidth; height_img=obj.offsetHeight; var width=274; //预定义宽 var height=100; //预定义高 var ratW; //宽的缩小比例 var ratH; //高的缩小比例 var rat; //实际使用的缩小比例 if(width_img<=width && height_img<=height) { //如果比预定义的宽高小,原图显示。 obj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod ="image"; return; }else{ //如果大的话,要把 sizingMethod改成scale 如果属性是image, 不管怎么改div的宽高,都不起作用 obj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod ="scale"; } ratH=height/height_img; ratW=width/width_img; if(ratH<ratW) //选择最小的作为实际的缩小比例 rat=ratH; else rat=ratW; width_img=width_img * rat; height_img=height_img * rat; obj.style.width=width_img; obj.style.height=height_img; } </script></head><body> <h2>切记:</h2> <ol> <li>此法只在IE下有效, 请在IE下测试</li> <li>IE下, 必须设置"工具","Internet选项",选项卡"安全"——"可信站点",将你测试的站点添加进去才行.否则会出"系统找不到指定的资源"的 (特别是ie8, 很多人localhost测试没有问题, 上传到服务器有问题就是因为服务器没有添加为信任站点) .</li> </ol> <input type="file" name="pic1" size="10" onchange="ShowImage(this.value,'showpic1')" /> <div id="showpic1" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width: 274px; height: 100px"> </div></body></html>
- IE下上传图片时预览图片(1.IE7/IE8测试通过; 2.能根据比例缩放图片 )
- Firefox3,IE6,IE7,IE8上传图片预览
- Firefox3,IE6,IE7,IE8上传图片预览
- ff,ie6,ie7,ie8上传图片预览
- Firefox3,IE6,IE7,IE8上传图片预览
- Firefox3,IE6,IE7,IE8上传图片预览
- Jquery 上传图片预览,等比例缩放
- 兼容IE8、火狐的本地图片预览+等比例缩放
- 解决Firefox3,IE7,IE8上传图片预览.txt
- 上传图片前预览(兼容Firefox3,IE6,IE7,IE8)
- 图片上传预览,兼容IE6、IE7、IE8和firefox浏览器
- js 上传图片预览 Firefox,IE6,IE7,IE8
- ie6,ie7,ie8和firefox下兼容的图片上传预览
- ie8本地图片上传预览
- 上传图片预览,兼容IE8
- ie8 springmvc图片上传预览
- 预览本地图片(兼容IE7|IE8|Firefox)
- IE7 IE8 js 预览本地图片
- 从面向过程到面向对象
- Linux下apc安装指南
- 详解 QT 皮肤 QSS编程(1)
- pickle的序列化规则
- 用COMET技术实现WEB实时推送应用(转)
- IE下上传图片时预览图片(1.IE7/IE8测试通过; 2.能根据比例缩放图片 )
- 详解 QT 皮肤 QSS编程(2)
- linux Linux常见特殊符号 重定向符号
- 详解 QT 皮肤 QSS编程(3)
- Android中全屏无标题设置(Android学习随笔十一)
- 哈密顿回路
- KindEditor 4.0.2 发布
- iPhone 4S电池续航力低 位置服务是头号杀手
- 解决servlet中的中文乱码方法