IE7+ 浏览器兼容预览本地图片
css
#preview_fake { filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); overflow: hidden; }
html
<div class="row"> <div id="preview_fake"></div> <input type="file" name="uploadFile" onchange="previewImage(this)" /> </div>
js
//图片上传预览 IE是用了滤镜 function previewImage(file) { var self = $(file); //判断图片格式 if(!/\.(jpg|jpeg|png|JPG|PNG)$/.test(self.val())) { imgErr(self,"请上传JPG或PNG格式的图片"); return false; } var objPreviewFake = document.getElementById('preview_fake'); if (file.files && file.files[0]) { //ie10以上火狐谷歌支持 var fileData = file.files[0]; var size = fileData.size; var reader = new FileReader(); //判断图片文件大小不能大于2M if(size>0) { if (size > 2000 * 1024) { imgErr(self,"上传文件大小不可以超过2M"); return false; } } var reader = new FileReader(); reader.readAsDataURL(file.files[0]); reader.onload = function(evt){ $('<img onclick="openBig(this)" src="' + this.result +'" class="imghead qsc_img_circle">').appendTo(div); //修改上传按钮文字 self.next().find(".qsc_img_btn").text("重新上传"); //初始化图片收缩放大 $(".imghead").zoomify(); }; var img = self.prev(".qsc_img").find('imghead'); } else if ( objPreviewFake.filters ) //兼容IE,滤镜 { // IE7,IE8 在设置本地图片地址为 img.src 时出现莫名其妙的后果 //(相同环境有时能显示,有时不显示),因此只能用滤镜来解决 // IE7, IE8因安全性问题已无法直接通过 input[file].value 获取完整的文件路径 file.select(); var imgSrc = document.selection.createRange().text; $("#preview_fake").css({"width":"50px","height":"50px","margin-right":"140px"}); objPreviewFake.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgSrc; } }