IE7下不允许显示用户本地图片的问题
2008-09-15 12:16
274 查看
在IE6.0中,用户可以在javascript中或许最终用户本地图片的长宽:
<Script language=Javascript>
function getLocalImageInfo( imgUrl )
{
var objImg = new Image();
objImg.src = imgUrl;
alert( objImg.width ) //the width of the local image
alert( objImg.height ) //the height of the local image
}
//调用如下
getLocalImageInfo("file://c:/1.jpg");
</Script>
并且,在IE6.0中,在客户端本地上传图片前可以通过Javascript/html预览要上传的图片,并获取图片的文件大小:
<html>
<head>
<title>Upload file</title>
</head>
<body>
<input type="file" onchange="javascript:previewImage(this.value)" >
<img id="img" />
<script language="javascrtip">
function previewImage( imgUrl )
{
var objImg = document.getElementById("img");
objImg.src = imgUrl;
alert( "the size of the image file:" + objImg.fileSize )
}
</script>
</body>
</html>
Note: 上面的代码最好在img图片加载完毕后再取图片的大小,例如:objImg.onreadystatechange()=function{ if(objImg.readystate=="complete")............}
当在IE7中,如果上述代码放在客户机本机(以html的形式放在客户机器上,而不是放在IIS中通过http访问)以文件方式打开时仍然能实现IE6中的功能,但如果上述代码放在IIS中,用IE7 通过HTTP协议访问则不能正常工作。
经过查找资料才发现IE7在安全性方面做了提升,通过http访问的页面默认是没有访问用户本机图片文件的权限的,所以通过javascript获取不了本机的图片长宽,也不能将本机图片地址赋值给<img>对象。如果将所访问的站点放入“可信站点”列表中(IE7->工具->Internet选项->安全->可信站点),则可以如IE6一样正常工作。
如果不想通过客户将本站点设置为“可信”站点的方式来实现上传图片的预览及获取图片长宽信息,则可以利用style的"DXImageTransform.Microsoft.AlphaImageLoader" 滤镜来实现:
<html >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language=javascript>
function setImagePreview( fileUrl )
{
var objDivFilter = document.getElementById("divFilter")
if( fileUrl )
{
objDivFilter.style.width = "400px";
objDivFilter.style.height = "400px"; //这个设置初始大小是必须的
objDivFilter.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = image)";
objDivFilter.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileUrl;
// get width and height
alert( objDivFilter.offsetWidth)
alert( objDivFilter.offsetHeight)
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="txtFile" runat="server" Width="508px" onchange="javascript:setImagePreview( this.value );" />
<br />
<div id="divFilter" />
</div>
</form>
</body>
但上述办法还不能在客户端获取图片文件的大小,我也没有找到很好的解决方案。
另外:在.net中,可以在C#后台代码中获取图片的相应信息,只不过这种方式增加了一些不必要的网络传输过程,有一定的性能代价。
<Script language=Javascript>
function getLocalImageInfo( imgUrl )
{
var objImg = new Image();
objImg.src = imgUrl;
alert( objImg.width ) //the width of the local image
alert( objImg.height ) //the height of the local image
}
//调用如下
getLocalImageInfo("file://c:/1.jpg");
</Script>
并且,在IE6.0中,在客户端本地上传图片前可以通过Javascript/html预览要上传的图片,并获取图片的文件大小:
<html>
<head>
<title>Upload file</title>
</head>
<body>
<input type="file" onchange="javascript:previewImage(this.value)" >
<img id="img" />
<script language="javascrtip">
function previewImage( imgUrl )
{
var objImg = document.getElementById("img");
objImg.src = imgUrl;
alert( "the size of the image file:" + objImg.fileSize )
}
</script>
</body>
</html>
Note: 上面的代码最好在img图片加载完毕后再取图片的大小,例如:objImg.onreadystatechange()=function{ if(objImg.readystate=="complete")............}
当在IE7中,如果上述代码放在客户机本机(以html的形式放在客户机器上,而不是放在IIS中通过http访问)以文件方式打开时仍然能实现IE6中的功能,但如果上述代码放在IIS中,用IE7 通过HTTP协议访问则不能正常工作。
经过查找资料才发现IE7在安全性方面做了提升,通过http访问的页面默认是没有访问用户本机图片文件的权限的,所以通过javascript获取不了本机的图片长宽,也不能将本机图片地址赋值给<img>对象。如果将所访问的站点放入“可信站点”列表中(IE7->工具->Internet选项->安全->可信站点),则可以如IE6一样正常工作。
如果不想通过客户将本站点设置为“可信”站点的方式来实现上传图片的预览及获取图片长宽信息,则可以利用style的"DXImageTransform.Microsoft.AlphaImageLoader" 滤镜来实现:
<html >
<head id="Head1" runat="server">
<title>Untitled Page</title>
<script language=javascript>
function setImagePreview( fileUrl )
{
var objDivFilter = document.getElementById("divFilter")
if( fileUrl )
{
objDivFilter.style.width = "400px";
objDivFilter.style.height = "400px"; //这个设置初始大小是必须的
objDivFilter.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = image)";
objDivFilter.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = fileUrl;
// get width and height
alert( objDivFilter.offsetWidth)
alert( objDivFilter.offsetHeight)
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="txtFile" runat="server" Width="508px" onchange="javascript:setImagePreview( this.value );" />
<br />
<div id="divFilter" />
</div>
</form>
</body>
但上述办法还不能在客户端获取图片文件的大小,我也没有找到很好的解决方案。
另外:在.net中,可以在C#后台代码中获取图片的相应信息,只不过这种方式增加了一些不必要的网络传输过程,有一定的性能代价。
相关文章推荐
- css实际技巧---<a>标签中有文字图片ie7下不显示图片的问题
- IE7下按钮<input>不显示自定义背景图片
- IE7下按钮<input>不显示自定义背景图片
- IE9 不能显示本地图片问题
- 处理用户上传图片大小不一,前台显示的问题
- IE 6 图片<img/> 写入html ,图片不显示问题
- html的img中使用SVG图片做SRC在本地测试可用但是上传服务器后不能显示问题解决 标签: SVGMIME TYPE不显示服务器设置 2016-05-21 13:49 2517人阅读 评论(0)
- IE7下favicon.ico图标不能显示的问题
- javascript 火狐(firefox)不显示本地图片问题解决
- IE下不能显示png格式图片问题办法
- fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
- webView接入本地html图片 解决不显示问题
- CMYK图片在IE中无法显示的问题
- 解决IE6下div中文字显示竖排,IE7下div不能自适应高度问题
- IE7下按钮<input>不显示自定义背景图片
- IE7下按钮<input>不显示自定义背景图片
- IE,FireFox浏览器当选中图片就显示的兼容问题
- jpg格式图片在ie下显示XX的问题
- 兼容小问题之在IE中图片未显示
- FileUpLoad选择图片后,直接将图片显示在image中。及IE8本地路径("C:/fakepath/")出现问题的解决方案