js实现图片上传预览

   之前看到过一个人写的图片上传预览的功能,只不过,别人借助的第三方的js类库去做的图片预览,灰常郁闷,后来打算自已写一个,很纯的js写的,就像处女一样的纯,目前支持ie6,ie7,ie8,firefox的等比缩放的图片预览,chrome浏览器的预览功能尚未实现。可能写得不是很完善,希望大家帮忙改尽。
 
代码如下:
 
<!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>
    <title>图片预览</title>
    <style type="text/css">
        .preview_wrapper
        {
            width: 300px;
            height: 300px;
            background-color: #CCC;
            display: inline-block;
        }
        .preview
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); /*ie而设*/
        }
        #idImg
        {
            width: 300px;
            height: 300px;
        }
        .helpImg
        {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image); /*ie而设*/
            visibility: hidden;
        }
    </style>
    <script language="javascript" type="text/javascript">
               var ImagePreview = {
            fileObject: null, //file对象
            imgObject: null, //预览img对象
            divObject: null, //div对象
            helpImgObj: null, //辅助img对象
            options: { maxWidth: 300, maxHeight: 300 }, //预览图片允许的大小
            browerVesion: navigator.userAgent.toLowerCase(), //浏览器类型
            Trim: function (val) {//去空格
                return val.replace(/(^/s*)|(/s*$)/g, "");
            },
            fileformat: function () {//文件上传格式的的判断
 
                if (this.fileObject == null) return false;
 
                if (this.fileObject.value == "") { return false; }
                var str = this.fileObject.value;
 
                var Temp = str.lastIndexOf(".");
                
                if (Temp == -1) {
                    return false;
                }
                var TempFile = str.substring(Temp + 1, str.length);
                
                if (TempFile != "gif" && TempFile != "jpg" && TempFile != "GIF" && TempFile != "JPG" && TempFile != "bmp" && TempFile != "BMP" && TempFile != "JPEG" && TempFile != "jpeg" && TempFile != "png" && TempFile != "PNG") {
                    alert("图片文件格式错误,请重新确认!");
                    return false;
                }
            },
            getObject: function (obj) {
                return document.getElementById(obj);
            },
            Mode: function () {
                var nav = this.browerVesion;
                if (nav.indexOf("msie 7") != -1 || nav.indexOf("msie 8") != -1)
                    return "filter";
                else if (nav.indexOf("firefox") != -1)
                    return "domfile";
                else if (nav.indexOf("msie 6") != -1)
                    return "simple";
                else
                    return "remote"; 
            },
            getMode: function () {
 
                switch (this.Mode()) {
                    case "filter": return this.filterMode();
                    case "domfile": return this.domfileMode();
                    case "simple": return this.simpleMode();
                    case "remote": break;
                }
            },
            filterMode: function () {
                this.fileObject.select();
                //this.file.select();
                try { return document.selection.createRange().text; }
                finally { document.selection.empty(); }
            },
            domfileMode: function () {//firefox图片预览
                return this.fileObject.files[0].getAsDataURL();
            },
            remoteMode: function () {//chrome opera浏览器
            },
            simpleMode: function () {//ie 6
                return this.fileObject.value;
            },
            previewImg: function () {//预览
 
                var obj = this.getMode();
                if (this.browerVesion.indexOf("msie") != -1) {
                    this.divObject.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = obj; 
                    var helpimg = this.helpImgObj;
                    helpimg.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = obj;
                    this.autoSizePreview(this.divObject, 300, 300, helpimg.offsetWidth, helpimg.offsetHeight);
                    this.imgObject.style.display = "none";
                }
                else {
                    var s = this.imgObject;
                    s.style.display = "block";
                    s.style.width = "auto";
                    s.style.height = "auto";
                    s.src = obj;
                }
            },
            autoSizePreview: function (objPre, maxWidth, maxHeight, width, height) {//预览的图片等比缩放
 
                var param = { width: width, height: height, top: 0, left: 0 };
                if (width > maxWidth || height > maxHeight) {
                    rateWidth = width / maxWidth;
                    rateHeight = height / maxHeight;
                    if (rateWidth > rateHeight) {
                        param.width = maxWidth;
                        param.height = height / rateWidth;
                    } else {
                        param.width = width / rateHeight;
                        param.height = maxHeight;
                    }
                }
 
                param.left = (maxWidth - param.width) / 2;
                param.top = (maxHeight - param.height) / 2;
 

                objPre.style.width = param.width + 'px';
                objPre.style.height = param.height + 'px';
                objPre.style.marginTop = param.top + 'px';
                objPre.style.marginLeft = param.left + 'px';
            },
                        ImgTransparent: function () {
                var nav = this.browerVesion;
                if (nav.indexOf("msie 6") != -1 || nav.indexOf("msie 7") != -1) {
                    return "mhtml:" + document.scripts[document.scripts.length - 1].getAttribute("src", 4) + "!blankImage";
                }
                else
                    return "data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==";
            },
            loadImg: function (sender) {
                ImagePreview.autoSizePreview(sender, 300, 300, sender.offsetWidth, sender.offsetHeight);
 
            }
        };
 
      
    </script>
</head>
<body>
    <!-- <form id="form1" enctype="multipart/form-data">-->
    <table width="100%" cellpadding="6" cellspacing="1">
        <tr>
            <td>
                <div class="preview_wrapper">
                    <div class="preview">
                        <img id="idImg" alt="" onload="ImagePreview.loadImg(this)" />
                    </div>
                </div><br/>
                <input type="file" id="idFile" onchange="preview(this)" />
                <img class="helpImg" />
            </td>
            <td>
                
            </td>
        </tr>
    </table>
    <script language="javascript" type="text/javascript">
      
        document.getElementById("idImg").src = ImagePreview.ImgTransparent(); 
        function preview(obj) {
            ImagePreview.fileObject = obj;
            var parentObj = obj.parentNode;
            var imgObj = parentObj.getElementsByTagName("img")[0];
            ImagePreview.helpImgObj = parentObj.getElementsByTagName("img")[1];
            ImagePreview.imgObject = imgObj;
            ImagePreview.divObject = imgObj.parentNode;
            if (ImagePreview.fileformat() == false)return false;
            ImagePreview.previewImg();//预览
        }
    </script>
    <!-- </form>-->
</body>
</html>


 
<!-- -->
阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页