1. 程式人生 > >IE瀏覽器上傳圖片預覽兼容(IE 7 8 9 10 11)

IE瀏覽器上傳圖片預覽兼容(IE 7 8 9 10 11)

創建 lte 前端 ner ttr css soft dataurl 設置

 $("#file_upload").change(function () {
                var $file = $(this);
                var fileObj = $file[0];
                var windowURL = window.URL || window.webkitURL;
                var dataURL;
                var $img = $("#preview");
                if (fileObj && fileObj.files && fileObj.files[0
]) { dataURL = windowURL.createObjectURL(fileObj.files[0]); $img.attr(src, dataURL); } else { dataURL = $file.val(); // $img.css("filter",‘progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src="‘ + dataURL + ‘")‘);
// var imgObj = document.getElementById("preview"); // imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\"" + dataURL + "\")"; // imgObj.style.width = "48px"; // imgObj.style.height = "48px"; var
imgObj = document.getElementById("preview"); // 兩個坑: // 1、在設置filter屬性時,元素必須已經存在在DOM樹中,動態創建的Node,也需要在設置屬性前加入到DOM中,先設置屬性在加入,無效; // 2、src屬性需要像下面的方式添加,上面的兩種方式添加,無效; imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)"; imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL; } });


前端代碼:

    <input id="file_upload" type="file" />
    <div class="image_container" id="previewDIV">
      <img id="preview" width="200" height="200" alt="沒有圖片">
    </div>

 

IE瀏覽器上傳圖片預覽兼容(IE 7 8 9 10 11)