兼容IE,Firefox 图片即时显示

< div  style ="border-right: #aaaaaa 1px solid; padding-right: 5px; border-top: #aaaaaa 1px solid; padding-left: 5px; padding-bottom: 5px; border-left: #aaaaaa 1px solid; padding-top: 5px; border-bottom: #aaaaaa 1px solid; background-color: #228b22" >  
< html >
  < head >
   < SCRIPT  language =JavaScript >

   var  isIE  =   false ;
   var  isFF  =   false ;
   var  isSa  =   false ;

   if ((navigator.userAgent.indexOf( " MSIE " ) > 0 )  &&  (parseInt(navigator.appVersion)  >= 4 ))isIE  =   true ;
   if (navigator.userAgent.indexOf( " Firefox " ) > 0 )isFF  =   true ;
   if (navigator.userAgent.indexOf( " Safari " ) > 0 )isSa  =   true ; 

    function  showimg1(obj){

    var  path;
   if (isFF)
{
     img2.src = cardpic2.files.item( 0 ).getAsDataURL(); // 注意：在firefox中通过 obj.files.item(0).getAsDataURL() 获取input中的完整路径，
                                               // 否则obj.value 只能显示文件名不包含文件路径

}
else   if (isIE)
{
     // 最初的代码
     // img2.src=cardpic2.value;
     // 改进的代码
     img2.src = getValue(car dpic2);
}


    if ( ! obj.value)
    return ;

     var  reg  =   new  RegExp( " /.(jpg|gif|jpeg)+$ " ); // 验证文件的格式
     if (obj.value.match(reg))
    {
         var  img5 = document.getElementById( ' img5 ' ); // 判断是否已经存在img5 对象，不存在则创建此对象。
         if (img5)    
        {
            img5.src = path;
        }
         else
        {
             var  img = document.createElement( ' img ' );
            img.src = path;
            img.setAttribute( ' width ' , ' 120 ' );
            img.setAttribute( ' height ' , ' 90 ' );
            img.setAttribute( ' id ' , ' img5 ' );
            insertAfter(img,obj);          // 在当前对象后插入img5 控件
        }

    }
     else
    {
        alert( ' file format wrong! ' );
    }
   
   }

    function  showimg2()
   {
       var  img2 = document.getElementById( ' img_name2 ' );
       var  cardpic2 = document.getElementById( ' cardpic2 ' );
       if (isFF)
      {
        img2.src = cardpic2.files.item( 0 ).getAsDataURL();
      }
       else   if (isIE)
      {
        img2.src = cardpic2.value;
      }
   }

    function  insertAfter(newElement, targetElement)
   {  
       var  parent  =  targetElement.parentNode;  
       if (parent.lastChild  ==  targetElement)
      {  
         parent.appendChild(newElement);  
        // 如果<em>targetElement</em>是<em>parent</em>最后一个子元素，插入<em>newElement</em>  
      }
       else
      {  
        parent.insertBefore(newElement, targetElement.nextSibling);  
         // 如果不是，插入到<em>targetElement</em>下一个兄弟节点的前面       
      }  
   }  
 
function  getValue(obj) {
    obj.select();  // 该对象选取 
     return  document.selection.createRange().text;  // 返回选取项的文本内容 
}
   
   </ SCRIPT >
  </ head >
  < body >
   < form >
    < div  align ="left" >
     < input  type ="file"  onchange ="showimg1(this);"  id ="cardpic1"  name ="cardpic1"   />
     < Br >

     < input  type ="file"  onchange ="showimg2();"  id ="cardpic2"  name ="cardpic2"   />
     < img  border =0  width =140  height =87  id ="img_name2" >
        </ div >
   </ form >
  </ body >
</ html >