JS 本地图片预览

最新推荐文章于 2024-02-23 17:14:50 发布

Rkatsiteli

最新推荐文章于 2024-02-23 17:14:50 发布

阅读量625

点赞数

分类专栏： JavaScript + JQuery 文章标签： javascript

JavaScript + JQuery 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

　　　　　　 JS 本地图片预览

效果附上：

这里写图片描述

代码附上：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>图片上传本地预览</title>
        <style type="text/css">
            #preview {width: 260px;height: 190px;border: 1px solid #000;}
            #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
        </style>
    </head>

    <body>
        <div id="preview">
            <img id="imghead" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
        </div>

        <input type="file" onchange="previewImage(this)" />

    </body>
    <script type="text/javascript">
        //图片上传预览    IE是用了滤镜。
        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='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>

</html>

Rkatsiteli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 本地图片预览

JS 本地图片预览效果附上：代码附上：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>图片上传本地预览</title> <style type="text/css"> #preview {width: 260px;height: 190px;bor
复制链接

扫一扫