【www.gdgbn.com--页面特效】
常用图片上传带预览功能方法
一下为常见的图片预览实现方式,但是当远程访问该页面 的时候仍然会出现无法预览的情况,但是很多人用,应该也会发现有问题。代码如下。
<%@ page language="c#" autoeventwireup="true" codefile="photoupload.asp教程x.cs" inherits="photoupload" %>
<script type="text/网页特效" language="javascript">
</script>
说明:以下针对的是互联网情况,如果您在本地作测试,比如输入的地址是:http://127.0.0.1/...,则可以看到全部预览。
如果您使用的是 ie6,则可以看到以下预览;如果您使用的是 ie7,则看不到以下预览。
不论您使用的是 ie6 还是 ie7,均可以看到以下预览。
请选择一个图片进行预览:
所以得探寻另一种方式,具体实现直接发送代码如下,
<%@ page language="c#" autoeventwireup="true" codefile="photo.aspx.cs" inherits="photo" %>
<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>