JS 實現 文件上傳預覽

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">javascript

<html xmlns="http://www.w3.org/1999/xhtml" >css

    <head>html

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />java

        <title>圖片上傳本地預覽</title>ui

        <style type="text/css">this

            #preview {orm

                width: 260px;xml

                height: 190px;htm

                border: 1px solid #000;圖片

                overflow: hidden;

            }

            #imghead {

                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);

            }

        </style>

        <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>

    </head>

    <body>

        <div id="preview">

            <img id="imghead" width=100 height=100 border=0 src='img/ff.jpg'>

        </div>

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

    </body>

</html>

相關文章
相關標籤/搜索