jQuery插件imgPreviewQs實現(xiàn)上傳圖片預(yù)覽
更新時間:2016年01月15日 12:01:52 投稿:hebedich
這篇文章主要介紹了jQuery插件imgPreviewQs實現(xiàn)上傳圖片預(yù)覽的相關(guān)資料,需要的朋友可以參考下
上傳圖片預(yù)覽,支持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 = '<!--[if IE ' + ver + ']><i></i><![endif]-->' 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("瀏覽器不支持預(yù)覽圖片"); } }); 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+"' style='width:100%;height:100%;'/>"); }; 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()+"' style='width:100%;height:100%;'/>"); } function getUrl($this){ $this.select(); $this.blur(); var imgSrc =document.selection.createRange().text; document.selection.empty(); return imgSrc; } }; $.fn.imgPreviewQs.defaults = { destID:"" }; })(jQuery);
您可能感興趣的文章:
- jQuery實現(xiàn)本地預(yù)覽上傳圖片功能
- 基于jquery實現(xiàn)的上傳圖片及圖片大小驗證、圖片預(yù)覽效果代碼
- 簡單實現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery實現(xiàn)上傳圖片前預(yù)覽效果功能
- jquery實現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于jquery實現(xiàn)圖片上傳本地預(yù)覽功能
- jquery實現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
- jQuery實現(xiàn)圖片放大預(yù)覽實現(xiàn)原理及代碼
- jquery 圖片上傳按比例預(yù)覽插件集合
- jQuery點擊頭像上傳并預(yù)覽圖片
- jQuery+HTML5實現(xiàn)圖片上傳前預(yù)覽效果
- jQuery實現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
相關(guān)文章
jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法
本文給大家介紹jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯誤的解決辦法,涉及到uploadify上傳錯誤302相關(guān)問題,對本文感興趣的朋友一起看看吧2015-12-12使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中,使用jQuery實現(xiàn)dropdownlist的聯(lián)動效果.2011-03-03