用原生JS實現多張圖片上傳及預覽功能（兼容IE8）

最近需要做一個圖片上傳預覽的功能（兼容IE8-11、chrome、firefox等瀏覽器），網上現有的文件上傳組件（如webuploader）總是會遇到一些兼容性問題。於是我參考了一些博文（鏈接找不到了⊙o⊙…），自己用原生JS寫了一個支持多張圖片上傳預覽功能的Demo

先通過最終效果看一下功能：

1. 上傳前
   

2. 點擊按鈕打開文件資源管理器后只會顯示圖片格式的文件（通過input標簽accept屬性過濾）
   

3. 在（非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;
}

• JS:

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