- 浏览: 731631 次
- 性别:
- 来自: 南京
文章分类
- 全部博客 (663)
- Eclipse&MyEclipse (40)
- PHP (3)
- Java (72)
- CSS (3)
- MySQL (35)
- Oracle (68)
- Red Hat Linux (23)
- Tomcat (26)
- Oracle10gAS (1)
- Spring (28)
- MyBatis&iBatis (13)
- JS (47)
- JQuery (23)
- Editplus (2)
- 其他 (4)
- Html (15)
- SQL (5)
- Ant (2)
- Hadoop (2)
- Servlet (9)
- Windows (11)
- Flex (1)
- CentOS Linux (7)
- Microsoft SQL Server (2)
- DB2 (3)
- Mysql char 与 varchar 区别 (0)
- excel (5)
- jsp (8)
- FreeMarker (1)
- EasyUI (5)
- WebShpere MQ (1)
- Maven2 (6)
- 浏览器缓存 (2)
- visio (1)
- XML (2)
- 物联网 (1)
- Maven (3)
- JSTL (2)
- HTTP (1)
- Fourinone (1)
- IP知识 (1)
- MyBatis (1)
- 项目管理 (2)
- office2003+2007 (1)
- DOS (1)
- JProfiler (1)
- Thinpad T440p (1)
- ActiveMQ (10)
- MongoDB (5)
- Vert.x3 (1)
- Ngnix (3)
- Spark (2)
- BigData (1)
- 性能概念公式 (1)
- RocketMQ (3)
- IT名词术语 (1)
- Java编程工具 (1)
- RabbitMQ (2)
- MetaMQ (1)
- 架构 (6)
- KafkaMQ (7)
- Redis (4)
- OAuth (1)
- Gradle (1)
- CentOS (5)
- Microsoft_Toolkit (1)
- git (5)
- IntelliJ Idea (4)
- Nginx (3)
- docker (12)
- VMware (2)
- 算法 (1)
- JDBCPool (1)
- spring-cloud (7)
- netbean (1)
- 微信小程序 (2)
- CURL (2)
- Java生成二维码 (1)
- 区块链 (2)
- 机器学习 (1)
- SpringBoot (3)
- Android (9)
- 微服务架构 (1)
- Kubernetes (2)
- OpenProject (0)
- 测试 (1)
- https (1)
- 开源许可证 (1)
- ServiceMesh (2)
- NET (0)
- .NET (1)
- TEST (1)
- iOS (2)
- thymeleaf (4)
- lombok (1)
- 浏览器设置 (1)
- 富文本编辑器 (1)
- 搜索引擎 (1)
- IT常识 (1)
- UML (0)
- Axure (1)
- appstore无法联网 (0)
- apk无法安装 (1)
- SQLServer (2)
- 卸载弹窗软件 (1)
- jenkins (1)
- TortoiseGit (1)
- eureka (1)
- ajax (1)
- spyder (0)
最新评论
网上找了不少资料发现以下两个原因导致Firefox3,IE7,I8上传图片预览变得复杂
1,基于安全性Firefox3,IE7,IE8已无法直接通过 input[file] 的 value 属性获得本地文件完整路径
2,IE7,IE8用js将本地图片地址赋给img.src时无效
参考网上的一些朋友提供的解决办法整理出一份不算完美但凑合能用的代码
Html 代码如下:
<!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>Firefox3,IE6,IE7,IE8上传图片预览</title>
<style type="text/css">
#preview_wrapper{
display:inline-block;
width:300px;
height:300px;
background-color:#CCC;
}
#preview_fake{ /* 该对象用于在IE下显示预览图片 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
#preview_size_fake{ /* 该对象只用来在IE下获得图片的原始尺寸,无其它用途 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
visibility:hidden;
}
#preview{ /* 该对象用于在FF下显示预览图片 */
width:300px;
height:300px;
}
</style>
<script type="text/javascript">
function onUploadImgChange(sender){
if( !sender.value.match( /.jpg|.gif|.png|.bmp/i ) ){
alert('图片格式无效!');
return false;
}
var objPreview = document.getElementById( 'preview' );
var objPreviewFake = document.getElementById( 'preview_fake' );
var objPreviewSizeFake = document.getElementById( 'preview_size_fake' );
if( sender.files && sender.files[0] ){
objPreview.style.display = 'block';
objPreview.style.width = 'auto';
objPreview.style.height = 'auto';
// Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
objPreview.src = sender.files[0].getAsDataURL();
}else if( objPreviewFake.filters ){
// IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果
//(相同环境有时能显示,有时不显示),因此只能用滤镜来解决
// IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径
sender.select();
var imgSrc = document.selection.createRange().text;
objPreviewFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
objPreviewSizeFake.filters.item(
'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
autoSizePreview( objPreviewFake,
objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight );
objPreview.style.display = 'none';
}
}
function onPreviewLoad(sender){
autoSizePreview( sender, sender.offsetWidth, sender.offsetHeight );
}
function autoSizePreview( objPre, originalWidth, originalHeight ){
var zoomParam = clacImgZoomParam( 300, 300, originalWidth, originalHeight );
objPre.style.width = zoomParam.width + 'px';
objPre.style.height = zoomParam.height + 'px';
objPre.style.marginTop = zoomParam.top + 'px';
objPre.style.marginLeft = zoomParam.left + 'px';
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = { width:width, height:height, top:0, left:0 };
if( width>maxWidth || height>maxHeight ){
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight ){
param.width = maxWidth;
param.height = height / rateWidth;
}else{
param.width = width / rateHeight;
param.height = maxHeight;
}
}
param.left = (maxWidth - param.width) / 2;
param.top = (maxHeight - param.height) / 2;
return param;
}
</script>
</head>
<body>
<div id="preview_wrapper">
<div id="preview_fake">
<img id="preview" onload="onPreviewLoad(this)"/>
</div>
</div>
<br/>
<input id="upload_img" type="file" onchange="onUploadImgChange(this)"/>
<br/>
<img id="preview_size_fake"/>
</body>
</html>
发表评论
-
js保留两位小数的方法如下
2021-08-20 10:29 2348js保留两位小数的方法 js保留两位小数 ... -
记一次:iframe嵌套网页,利用window.postMessage()实现子父窗口相互传值(转)
2019-12-13 09:57 849场景需要: http://a ... -
设置前端允许跨域请求后端API:Access-Control-Allow-Credentials(转)
2019-07-05 15:16 3702跨域报错信息: Console代码 ... -
JS后台菜单简易版(转)
2016-07-11 08:31 475<!DOCTYPE html PUBLIC &quo ... -
前端开发者不得不知的 ECMAScript 6 十大特性 (转)
2016-03-21 09:32 495ES6(ECMAScript2015)的出现,无疑给前端开发 ... -
17 行代码实现的简易 Javascript 字符串模板(转)
2016-03-01 14:19 688原作者:http://www.thinksaas.cn/g ... -
JSON字符串与JSON对象互转(前、后台)(转)
2015-11-19 09:09 1989SON官网:官网地址 (各种编程语言对应的工具应有尽有,前提 ... -
AMD:浏览器中的模块规范(转)
2015-11-17 15:58 489Snandy Stop, thinking is ... -
require.js的用法(转)
2015-11-17 15:44 565一、为什么要用require.js? 最早的时候,所有Ja ... -
[JS]jQuery中attr和prop方法的区别
2015-11-12 14:17 694原作者:http://blog.csdn.net/szwan ... -
jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})()
2015-11-12 14:03 620原作者:http://blog.csdn.net/szwan ... -
$.extend(true,{},a,b),深入理解,小心陷阱(转)
2015-11-12 13:53 1099$.extend一般情景下,使 ... -
Script error for: echarts/util/shape/HalfSmoothPolygon
2015-09-29 09:59 0Error: Script error for: ec ... -
JavaScript声明全局变量三种方式的异同
2015-08-27 15:54 431JavaScript中声明变量格式:var(关键字)+变量名( ... -
JavaScript function函数种类 (转)
2015-08-27 09:39 582【原作者】http://www.cnblogs.com/po ... -
JS日期转换
2015-07-21 15:05 666方法一:这个很不错,好像是 csdn 的 Meizz 写的: ... -
js 中{},[]中括号,大括号使用详解(转)
2015-06-17 16:57 2540js 中{},[]中括号,大括号使用详解 作者: 字体: ... -
javascript之数组操作 (转)
2015-05-31 00:02 665http://www.cnblogs.com/zhangzt/ ... -
javascript 中的几种 括号 (转)
2015-05-31 00:02 830小括号 JavaScript中小括号有五种语义 ... -
八款你不得不知的开源前端JS框架(转)
2014-11-02 21:31 907本文推荐了八款比较热门和经典的Javascript 开源框架 ...
相关推荐
Firefox3,IE6,IE7,IE8上传本地图片预览
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
解决了ie 7 8 火狐图片预览文件路径被过滤和文件图片原大小改变的解决方式
NULL 博文链接:https://huangjiateng.iteye.com/blog/1194870
ie6,ie7,ie8 ,和火狐上传图片预览,,非常好,,避免了用滤镜来实现,不支持跨浏览器,不用div 来实现,
虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流. qq:253930407 email:ruanjingwang@yahoo.com.cn
asp 上传图片预览 ie7-11 火狐 谷歌 qq 360 360双模式下测试
图片上传 预览 兼容 IE 6/7/8 firefox / 新版firefox
兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
NULL 博文链接:https://669341085.iteye.com/blog/874153
Jsp图片预览程序(含Java源码) 目前,很多网站都在为提升用户体验而努力,想尽多种办法让用户在网站上...程序中的JavaScript部分兼容ie6/7/8, firefox 3.5.5以及opera 10、safari 4.0.4、 chrome 3.0 等多种浏览器。
我找了很久,大多数都不能兼容最新版的火狐,这个能行,希望可以帮助到真正需要的人
这里我们按浏览器分,主要包括IE6,IE7/8 和Firefox3, 不包含Opera,Safari和Chrome,这三个基本上需求很小,没有研究。 总结一下就是: IE6下可以直接从file的value获取图片路径来显示预览。 IE7和IE8下通过select...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。...例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。(转载自用)
asp.net 多图片上传 预览 兼容火狐 IE
jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8,而且chrome 火狐最新版本也有问题,自己动手丰衣足食。分享给给大家。
js上传前预览图片,兼容IE,firefox,google
NULL 博文链接:https://youyou-1987.iteye.com/blog/813465
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。 上次...