用原生JS實現多張圖片上傳及預覽功能(相容IE8)
阿新 • • 發佈:2018-11-15
最近需要做一個圖片上傳預覽的功能(相容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; }
- 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;
}
}