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


Posted in Javascript onOctober 14, 2013

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

由于上传图片功能,现在大多数都需要在本地实现预览,为了能够更好的让用户体验到效果,实现成品的证明,需要兼容好几种浏览器,所有通过各个例子整合了这个例子插件,兼容火狐、谷歌、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; 
} 
}); 
);
Javascript 相关文章推荐
js以对象为索引的关联数组
Jul 04 Javascript
JavaScript打印iframe内容示例代码
Aug 20 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
JS实现的Select三级下拉菜单代码
Aug 20 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
JS输出空格的简单实现方法
Sep 08 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 #Javascript
js算法中的排序、数组去重详细概述
Oct 14 #Javascript
鼠标拖动实现DIV排序示例代码
Oct 14 #Javascript
不同Jquery版本引发的问题解决
Oct 14 #Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
Oct 14 #Javascript
javascript预加载图片、css、js的方法示例介绍
Oct 14 #Javascript
js获取或设置当前窗口url参数的小例子
Oct 14 #Javascript
You might like
javascript 多级checkbox选择效果
2009/08/20 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
2014/01/10 Javascript
js 动态修改css文件用到了cssRule
2014/08/20 Javascript
javascript实现依次输入input自动定焦
2014/12/23 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
jQuery实现伸展与合拢panel的方法
2015/04/30 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
jQuery得到多个值只能用取Class ,不能用取ID的方法
2016/12/04 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
vue.js与后台数据交互的实例讲解
2018/08/08 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
在layui中select更改后生效的方法
2019/09/05 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
[54:08]LGD女子刀塔学院 DOTA2炼金术士教学
2014/01/09 DOTA
Python实现子类调用父类的方法
2014/11/10 Python
python爬虫获取小区经纬度以及结构化地址
2018/12/30 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
使用Python做定时任务及时了解互联网动态
2019/05/15 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
EJB实例的生命周期
2016/10/28 面试题
班长岗位职责
2013/11/10 职场文书
人事主管的岗位职责
2013/11/16 职场文书
财务会计毕业生个人求职信
2014/02/03 职场文书
幼儿园中秋节活动方案
2014/02/06 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
应届生求职信
2014/05/31 职场文书
大学迎新生标语
2014/10/06 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers