1. 程式人生 > >IE8選圖片顯示預覽圖效果

IE8選圖片顯示預覽圖效果

坑點

  1. IE8不能獲取到inputd的files物件
  2. 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' : ''); }