上传图片前的预览

点击浏览后自动在页面显示预览效果。自己试着写了下。
关键是利用file对象的onchange事件，并且要判断上传的格式。

<! 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"  xml:lang ="en"  lang ="en" >
< head >
   < title ></ title >
</ head >
< body >
< script  type ="text/javascript" >
function  previewPic(){
    img = document.getElementById( " f " );
     if (img){
        imgext = img.value.substring(img.value.indexOf('.'),img.value.length);
        imgext = imgext.toLowerCase();
         if (imgext != '.bmp' && imgext != '.jpg' && imgext != '.jpeg' && imgext != 'gif'){
            img.value = '';
            alert('格式不对！');
             return   false ;
        }
        document.getElementById( " previewImg " ).innerHTML = " <img src=' " + img.value + " ' width=120 /> " ;
    }
}
</ script >
< input  type ="file"  name ="f"  id ="f"  onchange ="previewPic()"   />
< div  id ="previewImg" ></ div >
</ body >
</ html >