用原生JS实现多张图片上传及预览功能（兼容IE8）

最近需要做一个图片上传预览的功能（兼容IE8-11、chrome、firefox等浏览器），网上现有的文件上传组件（如webuploader）总是会遇到一些兼容性问题。于是我参考了一些博文（链接找不到了⊙o⊙…），自己用原生JS写了一个支持多张图片上传预览功能的Demo

先通过最终效果看一下功能：

上传前
点击按钮打开文件资源管理器后只会显示图片格式的文件（通过input标签accept属性过滤）
在（非IE）浏览器下支持选中多张图片同时上传（通过input标签multiple属性）（这里在JS代码中设置最多上传2张）

代码如下：

完整版Demo代码打包（包含图片）下载地址

HTML:

<div class="pic">
    <div class="uploadImage">
        <input type="file" value="上传文件" id="file" accept="image/png, image/jpeg, image/gif, image/jpg" multiple/>
        <p>点击上传</p>
    </div>
    <div class="preview">
        <img src="" id="look1">
        <p class="word">图片1</p>
    </div>
    <div class="preview">
        <img src="" id="look2">
        <p class="word">图片2</p>
    </div>
</div>

CSS:

.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;
}

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;
    }
}

用原生JS实现多张图片上传及预览功能（兼容IE8）

猜你喜欢