【www.gdgbn.com--页面特效】

常用图片上传带预览功能方法
一下为常见的图片预览实现方式,但是当远程访问该页面 的时候仍然会出现无法预览的情况,但是很多人用,应该也会发现有问题。代码如下。

 

<%@ page language="c#" autoeventwireup="true" codefile="photoupload.asp教程x.cs" inherits="photoupload" %>



   
    本地图片预览代码(支持 ie6、ie7)
   
    <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>



   


   
       
           
                
                   
                       
                   
               
               

               
               
           
       
      
   


本文来源:http://www.gdgbn.com/wangyetexiao/29421/