上传图片预览，支持IE6、IE7、IE8、IE9、IE10、IE11。 火狐、Chrome 具体没有测试，但是高版本都支持。

imgPreviewQs.js

/*! 依赖 jQuery 1.5.2 (c) 2016 license: http://www.opensource.org/licenses/mit-license.php */ (function($){ $.fn.imgPreviewQs = function(options){ function isIE(ver){ var b = document.createElement('b') b.innerHTML = '<>' return b.getElementsByTagName('i').length === 1; } options = $.extend( {}, $.fn.imgPreviewQs.defaults,options); var $this =$(this); $this.change(function(){ var regex=/(.*).(jpg|jpeg|gif|bmp|png)$/; var val = $this.val(); if(!regex.test(val)){ alert("请选择图片"); return false; } if(browserQs.isIE(8)){ HanderIE789($this); } else if(window.FileReader){ HanderFileReader($this); } else if(browserQs.isIE(9)){ HanderIE789($this); } else if(browserQs.isIE(6)){ HanderOther($this); } else if(browserQs.isIE(7)){ HanderIE789($this); } else{ $("#"+options.destID).html("浏览器不支持预览图片"); } }); function HanderFileReader($this){ var oPreviewImg = null, oFReader = new window.FileReader(), rFilter = /^(?:image/bmp|image/cis-cod|image/gif|image/ief|image/jpeg|image/jpeg|image/jpeg|image/pipeg|image/png|image/svg+xml|image/tiff|image/x-cmu-raster|image/x-cmx|image/x-icon|image/x-portable-anymap|image/x-portable-bitmap|image/x-portable-graymap|image/x-portable-pixmap|image/x-rgb|image/x-xbitmap|image/x-xpixmap|image/x-xwindowdump)$/i; oFReader.onload = function (oFREvent) { $("#"+options.destID).html("<img src='"+oFREvent.target.result+"'/>"); }; var aFiles = $this.get(0).files; if (aFiles.length === 0) { return; } if (!rFilter.test(aFiles[0].type)) { alert("请选择图片"); return; } oFReader.readAsDataURL(aFiles[0]); } function HanderIE789($this){ $("#"+options.destID).css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src='"+getUrl($this)+"')"); } function HanderOther($this){ $("#"+options.destID).html("<img src='"+$this.val()+"'/>"); } function getUrl($this){ $this.select(); $this.blur(); var imgSrc =document.selection.createRange().text; document.selection.empty(); return imgSrc; } }; $.fn.imgPreviewQs.defaults = { destID:"" }; })(jQuery);

【jQuery插件imgPreviewQs实现上传图片预览】相关文章：

★ jQuery实现返回顶部功能

★ jQuery仿gmail实现fixed布局的方法

★ JQuery插件ajaxfileupload.js异步上传文件实例

★ jQuery实现表格行上下移动和置顶效果

★ jquery实现图片左右切换的方法

★ jQuery实现在列表的首行添加数据

★ jQuery插件expander实现图片翻转特效

★ JQuery+CSS实现图片上放置按钮的方法

★ jQuery实现的多屏图像图层切换效果实例

★ jQuery插件实现适用于移动端的地址选择器