IE8選圖片顯示預覽圖效果
阿新 • • 發佈:2019-02-20
坑點
- IE8不能獲取到
input
d的files
物件 - IE8設定本地圖片地址為src後,有的圖顯示,有的圖不顯示(未探索具體原因)
解決辦法
支援files
物件的就用base64的方法(不要問我為什麼要用base64,最先想到的就是base64)
不支援的就通過濾鏡方式來實現
介面HTML程式碼
<input type="file" id="fileUpload">
<div id="img2" style="width:600px;height:300px">
</div>
<img id="img" src="" width="600" height ="300"/>
相應js
$("#fileUpload").change(function (e) {
//支援360和chrome
if (this.files) {
var file = this.files[0];
var reader = new FileReader();
reader.readAsDataURL(file); //呼叫自帶方法進行轉換
reader.onload = function (e) {
$("#img").attr("src", this.result); //將轉換後的編碼存入src完成預覽
};
} else {
//相容IE8
document.getElementById("fileUpload_shopask").select(); //選中FileUpload控制元件中的文字
var path = document.selection.createRange().text;
document.getElementById("img2").innerHTML = "";
document.getElementById("img2").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='" + path + "')";
}
changeImg(this.files)
});
function changeImg(flag) {
//true表示支援files,顯示img,不支援時顯示img2
$("img").css("display", flag ? '' : 'none');
$("img2").css("display", flag ? 'none' : '');
}