js图片上传预览

最新推荐文章于 2025-08-22 11:32:18 发布

kingboyrang

最新推荐文章于 2025-08-22 11:32:18 发布

阅读量4.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript 文章标签： function filter firefox wrapper ie javascript

本文链接：https://blog.youkuaiyun.com/wlzwcr/article/details/5933740

javascript 专栏收录该内容

4 篇文章

订阅专栏

之前看到过一个人写的图片上传预览的功能，只不过，别人借助的第三方的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">
        /******************************************************************
            create Datetime:2010/10/07
            version: v1.0
            create Author:wulanzhou
            main Function:实现图片文件上传的预览与文件类型的判断
            appliance range:ie6,ie7,ie8,firefox
            bug:无法在chrome浏览器上预览,remote的功能实现出现了一些问题尚未解决
        *******************************************************************/
        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;

                switch (this.Mode()) {
                    case "filter": return this.filterMode();
                    case "domfile": return this.domfileMode();
                    case "simple": return this.simpleMode();
                    case "remote": break;
                }
            },
            filterMode: function () {//ie 7与ie 8的图片预览
                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 () {//预览

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';
            },
            //            buttonShow: function () {
            //                if (this.img.width == 0 || this.img.height == 0)
            //                    setTimeout(this.buttonShow(), 1000);
            //                else
            //                { }
            //            },
            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>
    
    <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(); //為討厭的ie而設的,如果不设定默认会出一个打叉的图片
        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>
    
</body>
</html>