上传图片时预览效果是怎么实现的?

看到有一些上传图片时可以先预览,不知道这种效果是怎么实现的,能通过JS在上传以前就预览图片吗?哪位高手给个代码,我找了好多的都不行.

解决方案 »

  1.   

    参考 ：http://www.cnblogs.com/benz/archive/2009/12/19/1627601.html
      

  2.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function showImg(obj){
    var imgobj = document.getElementById("imgid");
    imgobj.src = obj.value;
    }
    //-->
    </SCRIPT>
    </HEAD><BODY>
    <input type="file" onchange="showImg(this)"><br>
    <img src="" id="imgid"/>
    </BODY>
    </HTML>
      

  3.   

    <!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>Untitled Page</title>
    </head>
    <body><input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('img'))">
    <br />
    <img id="img"  STYLE="visibility:hidden" height="100px" width="100px"><script language="javascript" type="text/javascript">
    //==============================
    //功能:Javascript本地图片预览
    //Author:yaosansi
    //Site:<a href="<a href="http://www.yaosansi.com" target="_blank" rel="external">http://www.yaosansi.com</a>" target="_blank"><a href="http://www.yaosansi.com" target="_blank" rel="external">http://www.yaosansi.com</a></a>
    //Date:2006-02-21
    //说明:简单的判断了文件的合法性
    //适用于:上传文件前预览本地图片
    //==============================
      function ShowImage(value,img)
        {
         //alert(value);
         //检测盘符
         //alert(value.indexOf(':'));
         //检测文件是否有扩展名
         //alert(value.length-value.lastIndexOf('.'));
         //取文件扩展名
         //alert(value.substr(value.length-3,3));
         //检测文件扩展名是否合法
         //alert(CheckExt(value.substr(value.length-3,3)));
        
            if(value.length>5&&value.indexOf(':')==1&&(value.length-value.lastIndexOf('.'))==4&&CheckExt(value.substr(value.length-3,3)))
            {
                img.src=value;
                img.alt="本地图片预览";
                img.style.visibility="visible";
            }
            else
            {
    img.style.visibility="hidden";
      }
        }
        //检查扩展名是否合法,合法返回True
        function CheckExt(ext)
        {
         //这里设置允许的扩展名
         var AllowExt="jpg|gif|jpeg|png|bmp";
         var ExtOK=false;
    var ArrayExt;
    if(AllowExt.indexOf('|')!=-1)
    {
    ArrayExt=AllowExt.split('|');
    for(i=0;i<ArrayExt.length;i++)
    {
    if(ext.toLowerCase()==ArrayExt[i])
    {
    ExtOK=true;
    break;
    }
    }
    }
    else
    {
    ArrayExt=AllowExt;
    if(ext.toLowerCase()==ArrayExt)
    {
    ExtOK=true;
    }
    }
    return ExtOK;
        }
    </script></body>
    </html>
      

  4.   

    第一个太复杂了吧,第二个在处理的时候不行,出现的问题是:
    http://topic.csdn.net/u/20091221/14/e5997f00-cedb-4081-9632-cc0a73520e75.html
      

  5.   

    onpertychange事件 给图片加上连接