首页 > 代码库 > js 显示刚刚上传的图片 (onchange事件)

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="width: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 = http://www.mamicode.com/evt.target.result;}"‘;            file.select();            var src = http://www.mamicode.com/document.selection.createRange().text;"<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>

  

 

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