您的位置：首页 > Web前端 > JQuery

jquery实现兼容浏览器的图片上传本地预览功能

2018-10-12 14:02 1196 查看

一、图片上传实现本地预览

由于上传图片功能，现在大多数都需要在本地实现预览，为了能够更好的让用户体验到效果，实现成品的证明，需要兼容好几种浏览器，所有通过各个例子整合了这个例子插件，兼容火狐、谷歌、ie8，其他的没有进行测试过


(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); 
//设置样式 
autoScaling = function(){ 
imgPreview.css({"margin-left": 0,"margin-top": 0,"width":opts.width,"height":opts.height}); 
imgPreview.show(); 
} 
//file按钮出发事件 
_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);

二、调用方法


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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航