jquery實(shí)現(xiàn)兼容瀏覽器的圖片上傳本地預(yù)覽功能

更新時(shí)間：2013年10月14日 17:50:28 作者：

圖片上傳本地預(yù)覽功能代碼在網(wǎng)上可以搜索很多，但同時(shí)可以兼容瀏覽器的話就多了，本文有個(gè)不錯(cuò)的示例，感興趣的朋友可以參考下

一、圖片上傳實(shí)現(xiàn)本地預(yù)覽

由于上傳圖片功能，現(xiàn)在大多數(shù)都需要在本地實(shí)現(xiàn)預(yù)覽，為了能夠更好的讓用戶體驗(yàn)到效果，實(shí)現(xiàn)成品的證明，需要兼容好幾種瀏覽器，所有通過(guò)各個(gè)例子整合了這個(gè)例子插件，兼容火狐、谷歌、ie8，其他的沒(méi)有進(jìn)行測(cè)試過(guò)

復(fù)制代碼代碼如下:

 
(function($){ 
jQuery.fn.extend({ 
uploadPreview: function(opts){ 
opts = jQuery.extend({ 
width: 0, 
height: 0, 
imgPreview: null, 
imgType: ["gif", "jpeg", "jpg", "bmp", "png"], 
callback: function(){ return false; } 
}, opts || {}); 

var _self = this; 
var _this = $(this); 
var imgPreview = $(opts.imgPreview); 
//設(shè)置樣式 
autoScaling = function(){ 
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height}); 
imgPreview.show(); 
} 
//file按鈕出發(fā)事件 
_this.change(function(){ 
if (this.value) { 
if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) { 
alert("圖片類型必須是" + opts.imgType.join("，") + "中的一種"); 
this.value = ""; 
return false; 
} 
if ($.browser.msie) {//判斷ie 
var path = $(this).val(); 
if (/"\w\W"/.test(path)) { 
path = path.slice(1,-1); 
} 
imgPreview.attr("src",path); 
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height}); 
setTimeout("autoScaling()", 100); 
} 
else { 
if ($.browser.version < 7) { 
imgPreview.attr('src', this.files.item(0).getAsDataURL()); 
} 
else { 
oFReader = new 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){ 
imgPreview.attr('src', oFREvent.target.result); 
}; 
var oFile = this.files[0]; 
oFReader.readAsDataURL(oFile); 
} 
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height}); 
setTimeout("autoScaling()", 100); 
} 
} 
opts.callback(); 
}); 
} 
}); 
})(jQuery); 

二、調(diào)用方法

復(fù)制代碼代碼如下:

 
jQuery(function(){ 
jQuery("#idFile1").uploadPreview({ 
width: 100, 
height: 100, 
imgPreview: "#idImg1", 
imgType: ["bmp", "gif", "png", "jpg"], 
callback: function() { 
ip1(); 
return false; 
} 
}); 
); 

您可能感興趣的文章: