js实现上传图片及时预览

前端技术 2023/09/01 JavaScript

本文实例为大家分享了javascript图片预览功能实现的具体代码，供大家参考，具体内容如下

先为大家分享一段关于js图片预览的代码，兼容火狐和谷歌浏览器

 /* 案例展示图片预览 */
$(function(){
  $(\"#file0\").bind(\"change\",function(){
 
    clickupLoad();
  });
});
function clickupLoad(){
 
  var imgObject = document.getElementById(\'file0\');
  var getImageSrc = getFullPath(imgObject); // 本地路径
  var srcs = window.URL.createObjectURL(imgObject.files[0]);
  var pos = getImageSrc.lastIndexOf(\".\");
  var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀]
   
  if(srcs!=\"\"){
    $(\"#yulan2\").attr(\"src\",srcs);
  }else{
    alert(\"请选择一张图片\");
  }
   
}
function getFullPath(obj) {  //得到图片的完整路径
  if (obj)
  {
    if (window.navigator.userAgent.indexOf(\"MSIE\") >= 1){
      obj.select();
      return document.selection.createRange().text;
     
    }else if(window.navigator.userAgent.indexOf(\"Firefox\") >= 1) {
      if (obj.files) {
        return window.URL.createObjectURL(obj.files[0]);
      }
      return obj.value;
    }
    return obj.value;
  }
}

实例代码实现js上传图片及时预览：

<html>
<head>   
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />   
<title>图片上传本地预览</title>   
<style type=\"text/css\">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type=\"text/javascript\">
 
 
        //图片上传预览  IE是用了滤镜。
    function previewImage(file)
    {
     var MAXWIDTH = 260; 
     var MAXHEIGHT = 180;
     var div = document.getElementById(\'preview\');
     if (file.files && file.files[0])
     {
       div.innerHTML =\'<img id=imghead>\';
       var img = document.getElementById(\'imghead\');
       img.onload = function(){
        var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
        img.width = rect.width;
        img.height = rect.height;
//         img.style.marginLeft = rect.left+\'px\';
        img.style.marginTop = rect.top+\'px\';
       }
       var reader = new FileReader();
       reader.onload = function(evt){img.src = evt.target.result;}
       reader.readAsDataURL(file.files[0]);
     }
     else //兼容IE
     {
      var sFilter=\'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"\';
      file.select();
      var src = document.selection.createRange().text;
      div.innerHTML = \'<img id=imghead>\';
      var img = document.getElementById(\'imghead\');
      img.filters.item(\'DXImageTransform.Microsoft.AlphaImageLoader\').src = src;
      var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
      status =(\'rect:\'+rect.top+\',\'+rect.left+\',\'+rect.width+\',\'+rect.height);
      div.innerHTML = \"<div id=divhead style=\'width:\"+rect.width+\"px;height:\"+rect.height+\"px;margin-top:\"+rect.top+\"px;\"+sFilter+src+\"\\\"\'></div>\";
     }
    }
    function clacImgZoomParam( maxWidth, maxHeight, width, height ){
      var param = {top:0, left:0, width:width, height:height};
      if( width>maxWidth || height>maxHeight )
      {
        rateWidth = width / maxWidth;
        rateHeight = height / maxHeight;
         
        if( rateWidth > rateHeight )
        {
          param.width = maxWidth;
          param.height = Math.round(height / rateWidth);
        }else
        {
          param.width = Math.round(width / rateHeight);
          param.height = maxHeight;
        }
      }
       
      param.left = Math.round((maxWidth - param.width) / 2);
      param.top = Math.round((maxHeight - param.height) / 2);
      return param;
    }
</script>   
</head>   
<body>
<div id=\"preview\">
  <img id=\"imghead\" width=100 height=100 border=0 src=\'<%=request.getContextPath()%>/images/defaul.jpg\'>
</div>
<input type=\"file\" onchange=\"previewImage(this)\" />   
</body>   
</html>

以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1152

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案