• js 显示刚刚上传的图片 (onchange事件)


         <table>
                <tr width="100">
                    <td>上传商场图片:</td>
                    <td>
                        <input type="file" name="img" onchange="previewImage(this)">
                    </td>
                </tr>
                <tr height=124px;>
                        <td ></td>
                        <td >
                            <inline id="preview">
                                <img id="imghead" style="186px;height:124px;"
                                    src='/image/{$mall_id}/{$activity.img}'>
                            </inline>
                        </td>
                    </tr>
            </table>   

     

    <script>
        // 上传图片时显示图片 js 
    	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='"+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, 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>
    

      

  • 相关阅读:
    【原】AMFObject数据格式详解
    STL总结 (C++)
    git相关项目迁移
    OBS_Classic经典版框架
    windows线程同步的几种方式
    面试题之strcpy / strlen / strcat / strcmp的实现
    python实用技巧
    Python Flask学习笔记之数据库
    Python Flask学习笔记之Web表单
    必应每日壁纸批量下载
  • 原文地址:https://www.cnblogs.com/renshi/p/4058930.html
Copyright © 2020-2023  润新知