页面上传图片后立即预览

      页面上的应用大多都有在个人信息管理中设置头像的这么一个功能，而对于实现这个功能前提就是上传头像的功能，而当上传完成即可预览是所有后续操作的前提。在网上巴拉了一番，然后整理了一下，拼凑了一个小demo供大家学习。本博文出自博客园，作者Red，联系邮箱 it_red@sina.com，转载请保留本文原文链接http://www.cnblogs.com/itred/p/5723864.html。

      这个demo基本可以实现页面上打开页面后，点击上传头像图片的按钮，经过选择，上传成功后即可在页面指定位置显示刚刚确认上传完成的图片，这个图片的大小是经过默认设置的，对于页面的样式，图片的大小等这些都可以根据自己的实际应用进行调整，最重要的是这个功能基本可用，而且兼容多个浏览器，不会出现浏览器不兼容的问题，如果还有浏览器没有测出来，请各位指出，以便进一步优化，在此表示感谢。

     说一下开发环境，我用的是idea完成的，但是这个demo并不依赖开发环境，实际上就是一个html和一张默认的图片，其实就是最基础的js实现的。因此一般人都可以看懂，而且还可以进一步进行扩展。

1.style样式设置：

<title>图片上传本地预览</title>
<style type="text/css">
    #preview{
        width: 180px;
        height: 183px;
        border: 1px solid gray;
        overflow: hidden;
    }
    #imghead{
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    }
</style>

2. 核心javascript：

<script type="text/javascript">
    function previewImage(file) {
        var MAXWIDTH = 180;
        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='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>

3. body布局如下：

<body>
<div id="preview">
    <img id="imghead" border=0 src="img/head_180.jpg" width="180" height="180" />
</div>
<input type="file" onchange="previewImage(this)" />
</body>

 

 基本就是完成了。demo的源码下载请点击我，运行效果如下：

　　　　　　

  作者：Red 博客：http://itred.cnblogs.com
  GitHub：https://github.com/itRed

版权声明：本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段说明，
且在文章明显位置给出原文链接，否则保留追究法律责任的权利。

 

posted on 2016-07-31 20:43  itRed  阅读(4658)  评论(0)    收藏  举报

导航