jsp 对话框

jsp 点击按钮弹出对话框上传图片,点击确定时回到该页面，页面输入的内容存在,且图片的缩略图在该页面显示

解决方案 »

  1.   

    http://bbs.csdn.net/topics/390577033?page=1#post-395462570
      

  2.   

    我技术博客上有：http://blog.csdn.net/nhconch/article/details/7295456
    回复内容有更详细内容，请稳步博客。<!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:100px;height:100px;border:1px solid #000;overflow:hidden;}  
    #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}  
    </style>  
    <script type="text/javascript">  
    function previewImage(file)  
    {  
      var MAXWIDTH  = 100;  
      var MAXHEIGHT = 100;  
      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  
      {  
        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;margin-left:"+rect.left+"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='../images/head01_big.jpg'>  
    </div>  
        <br/>       
        <input type="file" onchange="previewImage(this)" />       
    </body>       
    </html>