图片预览效果---无刷新

最新推荐文章于 2023-08-10 14:51:42 发布
LMAOhuaNL
最新推荐文章于 2023-08-10 14:51:42 发布
阅读量1.1k
点赞数
分类专栏： js 文章标签： wrapper function input ie file firefox
js 专栏收录该内容
28 篇文章 0 订阅
订阅专栏
<!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 runat="server">
    <title></title>
<style type="text/css"> 
#preview_wrapper,#preview_wrapper1{   
    display:inline-block;   
    width:100px;   
    height:100px;   
    background-color:#CCC;   
}   
#preview_fake,#preview_fake1{ /* 该对象用户在IE下显示预览图片 */   
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);   
}   
#preview_size_fake,#Img1{ /* 该对象只用来在IE下获得图片的原始尺寸，无其它用途 */   
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);     
    visibility:hidden;   
}   
#preview,#preview1{ /* 该对象用户在FF下显示预览图片 */   
    width:100px;   
    height:100px;   
}   
</style> 

<script type="text/javascript">
    function onUploadImgChange(sender) {
        if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
            alert('图片格式无效！');
            return false;
        }

        var objPreview = document.getElementById('preview');
        var objPreviewFake = document.getElementById('preview_fake');
        var objPreviewSizeFake = document.getElementById('preview_size_fake');

        if (sender.files && sender.files[0]) {
            objPreview.style.display = 'block';
            objPreview.style.width = 'auto';
            objPreview.style.height = 'auto';

            // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            objPreview.src = sender.files[0].getAsDataURL();
        } else if (objPreviewFake.filters) {
            // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果   
            //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决   

            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            sender.select();
            var imgSrc = document.selection.createRange().text;

            objPreviewFake.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            objPreviewSizeFake.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

            autoSizePreview(objPreviewFake,
            objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
            objPreview.style.display = 'none';
        }
    }

    function onPreviewLoad(sender) {
        autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
    }

    function autoSizePreview(objPre, originalWidth, originalHeight) {
        var zoomParam = clacImgZoomParam(100, 100, originalWidth, originalHeight);
        objPre.style.width = zoomParam.width + 'px';
        objPre.style.height = zoomParam.height + 'px';
        objPre.style.marginTop = zoomParam.top + 'px';
        objPre.style.marginLeft = zoomParam.left + 'px';
    }

    function clacImgZoomParam(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;

        return param;
    }   

    //第二张图片
    function onUploadImgChange1(sender) {
        if (!sender.value.match(/.jpg|.gif|.png|.bmp/i)) {
            alert('图片格式无效！');
            return false;
        }

        var objPreview = document.getElementById('preview1');
        var objPreviewFake = document.getElementById('preview_fake1');
        var objPreviewSizeFake = document.getElementById('Img1');

        if (sender.files && sender.files[0]) {
            objPreview.style.display = 'block';
            objPreview.style.width = 'auto';
            objPreview.style.height = 'auto';

            // Firefox 因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            objPreview.src = sender.files[0].getAsDataURL();
        } else if (objPreviewFake.filters) {
            // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果   
            //（相同环境有时能显示，有时不显示），因此只能用滤镜来解决   

            // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径   
            sender.select();
            var imgSrc = document.selection.createRange().text;

            objPreviewFake.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;
            objPreviewSizeFake.filters.item(
            'DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc;

            autoSizePreview(objPreviewFake,
            objPreviewSizeFake.offsetWidth, objPreviewSizeFake.offsetHeight);
            objPreview.style.display = 'none';
        }
    }

    function onPreviewLoad1(sender) {
        autoSizePreview(sender, sender.offsetWidth, sender.offsetHeight);
    }

    function autoSizePreview(objPre, originalWidth, originalHeight) {
        var zoomParam = clacImgZoomParam(100, 100, originalWidth, originalHeight);
        objPre.style.width = zoomParam.width + 'px';
        objPre.style.height = zoomParam.height + 'px';
        objPre.style.marginTop = zoomParam.top + 'px';
        objPre.style.marginLeft = zoomParam.left + 'px';
    }

    function clacImgZoomParam(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;

        return param;
    }  
</script> 




</head>
<body>
    <form id="form1" runat="server">
   <div id="preview_wrapper" style="float:left;"> 
        <div id="preview_fake"> 
            <img id="preview" οnlοad="onPreviewLoad(this)"/> 
        </div> 
    </div> 
     <div id="preview_wrapper1" style="float:left;"> 
        <div id="preview_fake1"> 
            <img id="preview1" οnlοad="onPreviewLoad1(this)"/> 
        </div> 
    </div> 
    <br/> <!--服务器的上传空间FileUpload也一样用-->
	<input type="file" id="id="upload_img" οnchange="onUploadImgChange(this)" />
    <br/> 
    <img id="preview_size_fake"/> 
    <br/> 
	<input type="file" id="id="upload_img1" οnchange="onUploadImgChange1(this)" />
    <br/> 
    <img id="Img1"/> 
    </form>
</body>
</html>