jsp做上传照片的代码

就像QQ头像上传那样的功能,点上传,出现选择图片的对话框,选择图片后,立刻在页面显示出来... 就像QQ头像上传那样的功能,点上传,出现选择图片的对话框,选择图片后,立刻在页面显示出来 展开
 我来答
a2040605
2014-03-17 · TA获得超过337个赞
知道小有建树答主
回答量:194
采纳率:100%
帮助的人:131万
展开全部
<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{border:1px solid #000;overflow:hidden;}
            #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
        </style>
        <script type="text/javascript">
            function previewImage(file)
            {
                var MAXWIDTH  = 800;
                var MAXHEIGHT = 600;
                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=800 height=600 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'/>
        </div>
        <input type="file" onchange="previewImage(this)" />    
    </body>    
</html>
追问
src=''这里的路径该怎么写呢?
追答
直接运行就可以了  不用改路径

/images/defaul.jpg'/> 这里的这个图片是还没上传的时候显示的图片,你改成你项目里面的路径就行了
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式