JS实现图片上传前预览 [转改]

效果如下：　　　　

　　　　

实现代码：

JS脚本如下：

 

 <script language="javascript" type="text/javascript">
        function getFullPath(obj)
        {
            if(obj)
            {
                //ie
                if (window.navigator.userAgent.indexOf("MSIE")>=1)
                {
                    obj.select();
                    return document.selection.createRange().text;
                }
            //firefox
                else if(window.navigator.userAgent.indexOf("Firefox")>=1)
                {
                    if(obj.files)
                    {
                        return obj.files.item(0).getAsDataURL();
                    }
                        return obj.value;
                 }
                return obj.value;
            }
        }

        function yulan() 
        { 
            filename=document.getElementById('UpFile').value; 
            var fileText =filename.substring(filename.lastIndexOf("."),filename.length); //获取文件扩展名 

              var filePath =getFullPath(document.getElementById('UpFile')); 

            var fileName =fileText.toLowerCase(); 
           if ((fileName!='.jpg')&&(fileName!='.gif')&&(fileName!='.jpeg')&&(fileName!='.png')&&(fileName!='.bmp')) 
           { 
              alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 ！"); 
              document.form1.UpFile.focus(); 
           } 
           else 
           { 
              document.getElementById("preview").innerHTML="<img src='"+filePath+"' width=120 style='border:6px double #ccc'>"; 
           } 
        }

</script>

 

ASPX页面代码：

<input type="file" id="UpFile" class="stylebtn" name="UpFile" onchange="yulan()" />;
<asp:Button ID="btnUpload" runat="server" Text="上  传" 
onclick="btnUpload_Click" Height="22px" CssClass="stylebtn"/>
<div id="preview"></div>
　　

 

在FF,IE7,FF下测试正常 ！

 

作者：EricChen
出处：http://490653766.cnblogs.com/