js implements timely preview of uploaded images_javascript skills-JS Tutorial-php.cn

js implements timely preview of uploaded images_javascript skills

WBOY

Release： 2016-05-16 15:01:34

Original

1448 people have browsed it

The example in this article shares the specific code for implementing the javascript image preview function for your reference. The specific content is as follows

First, let me share with you a piece of code about js image preview, which is compatible with Firefox and Google Chrome

 /* 案例展示图片预览 */
$(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;
  }
}

Copy after login

Example code to implement timely preview of images uploaded via 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>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.