本地選圖預覽未上傳

時間 2019-11-12
標籤本地預覽未上简体版
原文原文鏈接
<!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" >
<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;}
</style>
<script type="text/javascript">
        function previewImage(file)
        {
          var MAXWIDTH  = 260; 
          var MAXHEIGHT = 190;
          var preview = document.getElementById('preview');
          //清除圖片
           while(preview.hasChildNodes()){
                preview.removeChild(preview.firstChild);}
                //非IE
          if (file.files && file.files[0])
          {
              var img = document.createElement('img');
              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.readAsDataURL(file.files[0]);
              reader.onload = function(evt){img.src = evt.target.result;
              preview.appendChild(img);
              }
             
          }
          else //IE
          {
            file.select();
            var src = document.selection.createRange().text;
            var img=document.createElement('img');
            img.src=src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.width, img.height);
            img.style.marginTop=rect.top+'px';
            img.style.marginLeft=rect.left+'px';
            //var styleStr='filter:Progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);'
            var stuleStr='';
            img.style.cssText='margin-top:'+rect.top+'px;margin-left:'+rect.left+'px;'+styleStr;
            preview.appendChild(img);
          }
        }
        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 if(rateWidth < rateHeight)
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }else{
                     param.width = width;
                     param.height = maxHeight;
                    }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
</script>     
</head>     
<body>
<img />
<div id="preview"></div>
<input id="file" type="file" onchange="previewImage(this)" />     
</body>     
</html>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。