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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
seajs加载jquery时提示$ is not a function该怎么解决
Oct 23 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
谈谈target=_new和_blank的不同之处
Oct 25 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
基于input动态模糊查询的实现方法
Dec 12 Javascript
JavaScript基于面向对象实现的猜拳游戏
Jan 03 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 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
PHP5 安装方法
2006/10/09 PHP
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
附件名前加网站名
2008/03/23 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
弹出最简单的模式化遮罩层的js代码
2013/12/04 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
轻松创建nodejs服务器(7):阻塞操作的实现
2014/12/18 NodeJs
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
用原生js做单页应用
2017/01/17 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
js实现拖拽上传图片功能
2017/08/01 Javascript
vue根据进入的路由进行原路返回的方法
2018/09/26 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
微信小程序实现点击空白隐藏的方法示例
2019/08/13 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
vue data变量相互赋值后被实时同步的解决步骤
2020/08/05 Javascript
Python实现的数据结构与算法之队列详解
2015/04/22 Python
Python基础中所出现的异常报错总结
2016/11/19 Python
Python实现的三层BP神经网络算法示例
2018/02/07 Python
python交换两个变量的值方法
2019/01/12 Python
解决python执行不输出系统命令弹框的问题
2019/06/24 Python
python3 requests库实现多图片爬取教程
2019/12/18 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
使用pytorch实现论文中的unet网络
2020/06/24 Python
财务会计应届生求职信
2013/11/24 职场文书
学习党课思想汇报
2013/12/29 职场文书
答谢会策划方案
2014/05/12 职场文书
演讲稿的格式及范文
2014/08/22 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
动画电影《龙珠超 超级英雄》延期上映
2022/03/20 日漫
Javascript的promise,async和await的区别详解
2022/03/24 Javascript