IE浏览器上传图片预览兼容(IE 7 8 9 10 11)
$("#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>
以上是鄙人的一些学习中的收获,以及部分粗鄙的见解,分享给刚好在这方面或有困惑的园友,同时也用作笔记!或有部分素材收集于网络,理解如有偏颇,请园友回复指正!拜谢!___ 勤能补拙是良训,一分辛苦一分才。与诸君共勉!