当前位置： 移动技术网 > IT编程>开发语言>JavaScript > jquery实现兼容浏览器的图片上传本地预览功能

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

2018年12月26日  | 移动技术网IT编程  | 我要评论

植发多少钱问微信moka818,林子君被打,369网址大全

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

由于上传图片功能，现在大多数都需要在本地实现预览，为了能够更好的让用户体验到效果，实现成品的证明，需要兼容好几种，所有通过各个例子整合了这个例子插件，兼容火狐、谷歌、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;
}
});
);

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网