IE瀏覽器上傳圖片預覽兼容(IE 7 8 9 10 11)
阿新 • • 發佈:2017-11-28
創建 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"; varimgObj = 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)