上传图片前预览本地图片

最新推荐文章于 2024-11-02 12:42:04 发布

iteye_16842

最新推荐文章于 2024-11-02 12:42:04 发布

阅读量89

点赞数

文章标签： javascript html showimage ViewUI

本文链接：https://blog.csdn.net/iteye_16842/article/details/82299301

版权


<input id="file" type="file" onfocus="javascript:ShowImage(this.value,document.getElementById('pimg'))"> 
<br /> 
<img id="pimg"    style="visibility:hidden" height="100px" width="100px"> 

<script language="javascript" type="text/javascript"> 
  //============================== 
  //功能:Javascript本地图片预览 
  //说明:简单的判断了文件的合法性 
  //适用于:上传文件前预览本地图片 
  //============================== 
    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>