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 >