图片上传兼容 IE8

2019-12-02

<html> <head> <meta charset="UTF-8"> <title></title> <style> .uploadImage{ display: inline-block; vertical-align: top; position: relative; width: 90px; height: 90px; background: url("../点击上传.png") no-repeat; background-size: cover; text-align: center; cursor: pointer; } .uploadImage p{ position: absolute; left:0;right:0; bottom: 10px; font-size: 14px; color: #999999; } .uploadImage input#file{ width: 100%; height: 100%; opacity: 0; cursor: pointer; } .preview{ position: relative; display: inline-block; vertical-align: top; margin-left: 10px; width: 90px; height: 90px; background: #E1E6ED; text-align: center; } .preview img{ position: relative; z-index: 1; width: 100%; height: 100%; } .preview img[src=""]{ opacity:0; filter: Alpha(0); /* 兼容IE8-9 / } .preview img:not([src]){ opacity:0; filter: Alpha(0); /兼容IE8-9 */ } .preview .word{ position: absolute; left: 0; right: 0; top: 0; line-height: 90px; font-size: 14px; color: #999999; z-index: 0; } </style> </head> <body>

<input type="file" value="上传文件" id="file" accept="image/png, image/jpeg, image/gif, image/jpg" multiple/>

点击上传

图片1

图片2

</body> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script type="text/javascript"> var hasUploadedOne = false;// 已上传过1张图片 var hasUploadedTwo = false;// 已上传过2张图片

//获取到预览框 var imgObjPreview1 = document.getElementById("look1"); var imgObjPreview2 = document.getElementById("look2");

document.getElementById('file').onchange = function() { // 若还没完成2张图片的上传 if(!hasUploadedTwo){ //获取到file的文件 var docObj = this;

//获取到文件名和类型(非IE,可一次上传1张或多张)
    if(docObj.files && docObj.files[0]) {
        // 一次上传了>=2张图片(只有前两张会真的上传上去)
        if(docObj.files.length >= 2){
            imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
            imgObjPreview2.src = window.URL.createObjectURL(docObj.files[1]);
            hasUploadedTwo = true;
        }
        //一次只上传了1张照片
        else{
            // 这是上传的第一张照片
            if(!hasUploadedOne){
                imgObjPreview1.src = window.URL.createObjectURL(docObj.files[0]);
                hasUploadedOne = true;
            }
            // 这是上传的第二张照片
            else{
                imgObjPreview2.src = window.URL.createObjectURL(docObj.files[0]);
                hasUploadedTwo = true;
            }
        }

    }
    //IE(只能一次上传1张)
    else {
        //使用滤镜
        docObj.select();
        var imgSrc = document.selection.createRange().text;
        // 这是上传的第一张照片
        if(!hasUploadedOne){
            imgObjPreview1.src = imgSrc;
            hasUploadedOne = true;
        }
        // 这是上传的第二张照片
        else{
            imgObjPreview2.src = imgSrc;
            hasUploadedTwo = true;
        }
        document.selection.empty();
    }
    return true;
}

} </script>

原文链接:segmentfault.com

上一篇:解决Echarts坐标轴最后一项标签的字体加粗的问题
下一篇:angular指令-inputNumber输入框只能输入数字
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部