jquery实现兼容浏览器的图片上传本地预览功能
jquery实现兼容浏览器的图片上传本地预览功能
发布时间:2016-12-30 来源:查字典编辑
摘要:一、图片上传实现本地预览由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览...

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

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

}

});

);

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类