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

 更新时间:2013年10月14日 17:50:28   作者:  
图片上传本地预览功能代码在网上可以搜索很多,但同时可以兼容浏览器的话就多了,本文有个不错的示例,感兴趣的朋友可以参考下
一、图片上传实现本地预览

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

相关文章

  • jQuery构造函数init参数分析续

    jQuery构造函数init参数分析续

    其实楼主的F和jQuery.fn.init是相等的; 实现功能是和jq一样的, 只是jq的把构造函数放进原型;如果非要说原因,个人理解jq这样写整体结构清晰,先是入口构造函数,紧跟着是原型部分(原型里面init是初始化),但是不好理解;乍一看确实挺绕, 我也是看了好久才明白怎么回事
    2015-05-05
  • 8个实用的jQuery技巧

    8个实用的jQuery技巧

    这篇文章主要介绍了8个超实用的jQuery技巧攻略,如禁用右键、返回顶部、图片预加载等,需要的朋友可以参考下
    2014-03-03
  • 使用jquery获取url及url参数的简单实例

    使用jquery获取url及url参数的简单实例

    下面小编就为大家带来一篇使用jquery获取url及url参数的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • element form 校验数组每一项实例代码

    element form 校验数组每一项实例代码

    这篇文章主要介绍了element form 校验数组每一项的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-10-10
  • jQuery模拟html下拉多选框的原生实现方法示例

    jQuery模拟html下拉多选框的原生实现方法示例

    这篇文章主要介绍了jQuery模拟html下拉多选框的原生实现方法,结合完整实例形式分析了jQuery动态操作页面元素实现select下拉框效果的相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • Jquery的hover方法让鼠标经过li时背景变色

    Jquery的hover方法让鼠标经过li时背景变色

    鼠标经过时让li背景变色,在某些时候还是挺实用的,下面为大家介绍下使用Jquery的hover方法来实现下,感兴趣的朋友可以参考下
    2013-09-09
  • jquery连缀语法如何实现

    jquery连缀语法如何实现

    我想熟悉javascript的没有不知道jquery的吧,不得不提的就是特有的连缀书写语法了,jquery连缀语法如何实现,接下来将详细介绍
    2012-11-11
  • Jquery实现图片预加载与延时加载的方法

    Jquery实现图片预加载与延时加载的方法

    这篇文章主要介绍了Jquery实现图片预加载与延时加载的方法,分别介绍了原生javascript与jQuery插件实现图片的预加载及延迟加载的方法,具有一定的参考借鉴价值,需要的朋友可以参考下
    2014-12-12
  • jQuery Mobile漏洞会有跨站脚本攻击风险

    jQuery Mobile漏洞会有跨站脚本攻击风险

    人们经常将跨站脚本攻击(Cross Site Scripting)缩写为CSS,但这会与层叠样式表(Cascading Style Sheets, CSS)的缩写混淆。因此有人将跨站脚本攻击缩写为XSS。
    2017-02-02
  • jQuery增加与删除table列的方法

    jQuery增加与删除table列的方法

    这篇文章主要介绍了jQuery增加与删除table列的方法,涉及jQuery针对table表格元素动态操作相关技巧,需要的朋友可以参考下
    2016-03-03

最新评论