jQuery插件imgPreviewQs實(shí)現(xiàn)上傳圖片預(yù)覽
更新時(shí)間:2016年01月15日 12:01:52 投稿:hebedich
這篇文章主要介紹了jQuery插件imgPreviewQs實(shí)現(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實(shí)現(xiàn)本地預(yù)覽上傳圖片功能
- 基于jquery實(shí)現(xiàn)的上傳圖片及圖片大小驗(yàn)證、圖片預(yù)覽效果代碼
- 簡單實(shí)現(xiàn)jQuery上傳圖片顯示預(yù)覽功能
- jQuery實(shí)現(xiàn)上傳圖片前預(yù)覽效果功能
- jquery實(shí)現(xiàn)圖片上傳前本地預(yù)覽功能
- 基于jquery實(shí)現(xiàn)圖片上傳本地預(yù)覽功能
- jquery實(shí)現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能
- jQuery實(shí)現(xiàn)圖片放大預(yù)覽實(shí)現(xiàn)原理及代碼
- jquery 圖片上傳按比例預(yù)覽插件集合
- jQuery點(diǎn)擊頭像上傳并預(yù)覽圖片
- jQuery+HTML5實(shí)現(xiàn)圖片上傳前預(yù)覽效果
- jQuery實(shí)現(xiàn)的上傳圖片本地預(yù)覽效果簡單示例
相關(guān)文章
如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長,所以都會(huì)設(shè)置這么一個(gè)按鈕,利用這個(gè)按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過實(shí)例代碼給大家簡單介紹一下吧2016-12-12
jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯(cuò)誤的解決辦法
本文給大家介紹jQuery Uploadify 上傳插件出現(xiàn)Http Error 302 錯(cuò)誤的解決辦法,涉及到uploadify上傳錯(cuò)誤302相關(guān)問題,對本文感興趣的朋友一起看看吧2015-12-12
使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中,使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動(dòng)效果.2011-03-03
jquery實(shí)現(xiàn)焦點(diǎn)輪播效果
本文主要介紹了jquery實(shí)現(xiàn)焦點(diǎn)輪播效果的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來看下吧2017-02-02

