html ie8上傳圖檔,圖檔上傳相容 IE8

boss非要相容ie8

現在誰還用ie8...唉...

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

}

.preview img:not([src]){

opacity:0;

filter: Alpha(0);

}

.preview .word{

position: absolute;

left: 0;

right: 0;

top: 0;

line-height: 90px;

font-size: 14px;

color: #999999;

z-index: 0;

}

點選上傳

圖檔1

圖檔2

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;

}

}