用javascript实现图片上传并预览

最新推荐文章于 2024-05-26 12:42:56 发布

RuGuo_09

最新推荐文章于 2024-05-26 12:42:56 发布

阅读量1.4w

点赞数 12

分类专栏： javascript html 文章标签： javascript chrome ie 9 ie 10

本文链接：https://blog.csdn.net/baidu_24024601/article/details/51276285

版权

javascript 同时被 2 个专栏收录

12 篇文章 2 订阅

订阅专栏

html

3 篇文章 1 订阅

订阅专栏

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome，FF，IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候ie9-老是显示不了图片。我以为是方法出现问题。于是找度娘，找谷歌；几乎都是这样实现的。搞了好久，都不知哪出问题了。最后才发现是测试的出现问题。我用IE-test来测试，还有IE11的仿真，其实这些都是不准确的。如果真的想测试在IE系列的效果，最好就对应版本的IE浏览器。这个可以用虚拟机实现，也可以用browserstack。一个很牛的云端虚拟机，几乎集成了所有的系统跟浏览器，不好的一点就是要钱。也对，那么好的东西不要钱就没天理了

下面附上代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上传预览演示-柯乐义</title>
    <style>
        .img-container{
            width: 293px;
            height: 150px;
            background:#F2F2F2;
            margin-bottom:35px;
            overflow: hidden;
            border: 1px solid #000;
        }
        .img-container>img{
            width: 293px;
            height: 150px;
        }
        .img{
            width: 293px;
            height: 150px;
        }
    </style>
</head>
<body>
    <form name="/" class="card-form">
        <div>
            <div class="img-container"></div>
            <input class="img-btn" type="file" id="drivingLicence" name="drivingLicence">
        </div>
    </form>
    <script>
        /**
         * Created by Administrator on 2016/4/28.
         */
//上传图片并预览
        function previewImg(fileInput,imgDiv){
            if(window.FileReader){//支持FileReader的时候
                var reader=new FileReader();
                reader.readAsDataURL(fileInput.files[0]);
                reader.onload=function(evt){
                    imgDiv.innerHTML="\<img src="+evt.target.result+"\>";
                }
            }else{//兼容ie9-
                imgDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + fileInput.value + '\)\';"></div>';
            }
        }
        function selectImg(fileInputs,imgDivs){
            var checkImg=new RegExp("(.jpg$)|(.png$)|(.bmp$)|(.jpeg$)","i");
            var i=0;
            for(;i<fileInputs.length&&i<imgDivs.length;i++){
                (function(i){//立即执行函数；保存i
                    fileInputs[i].onchange=function(){
                        if(checkImg.test(fileInputs[i].value)){
                            previewImg(this,imgDivs[i]);
                        }else{
                            alert("只支持上传.jpg .png .bmp .jpeg;你的选择有误");
                        }
                    };
                })(i);
            }

        }
        /* 为IE6 IE7 IE8增加document.getElementsByClassName函数 */
        /MSIE\s*(\d+)/i.test(navigator.userAgent);
        var isIE=parseInt(RegExp.$1?RegExp.$1:0);
        if(isIE>0&&isIE<9){
            document.getElementsByClassName=function(cls){
                var els=this.getElementsByTagName('*');
                var ell=els.length;
                var elements=[];
                for(var n=0;n<ell;n++){
                    var oCls=els[n].className||'';
                    if(oCls.indexOf(cls)<0)        continue;
                    oCls=oCls.split(/\s+/);
                    var oCll=oCls.length;
                    for(var j=0;j<oCll;j++){
                        if(cls==oCls[j]){
                            elements.push(els[n]);
                            break;
                        }
                    }
                }
                return elements;
            }
        }
        var fileInputs=document.getElementsByClassName("img-btn");//文件选择按钮
        var imgDivs=document.getElementsByClassName("img-container");//图片容器
        selectImg(fileInputs,imgDivs);
    </script>
</body>
</html>

RuGuo_09

关注

12
点赞
踩
11

收藏

觉得还不错? 一键收藏
3
评论
用javascript实现图片上传并预览

最近在开发的过程中遇到了一个图片上传并预览的问题。其实这问题不难。chrome，FF，IE10+可以用FileReader来实现。IE9-可以用css的滤镜来实现。一开始我也是这样干了。但是测试的时候ie9-老是显示不了图片。我以为是方法出现问题。于是找度娘，找谷歌；几乎都是这样实现的。搞了好久，都不知哪出问题了。最后才发现是测试的出现问题。我用IE-test来测试，还有IE11的仿真，其实这些都是
复制链接

扫一扫