/*
*名称:图片上传本地预览插件 v1.1
*作者:周祥
*时间:2013年11月26日
*介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari
*插件网站:http://keleyi.com/keleyi/phtml/image/16.htm
*参数说明: Img:图片ID;Width:预览宽度;Height:预览高度;ImgType:支持文件类型;Callback:选择文件显示图片后回调方法;
*使用方法:
<div>
<img id="ImgPr" width="120" height="120" /></div>
<input type="file" id="up" />
把需要进行预览的IMG标签外 套一个DIV 然后给上传控件ID给予uploadPreview事件
$("#up").uploadPreview({ Img: "ImgPr", Width: 120, Height: 120, ImgType: ["gif", "jpeg", "jpg", "bmp", "png"], Callback: function () { }});
*/
jQuery.fn.extend({
uploadPreview: function (opts) {
var _self = this,
_this = $(this);
opts = jQuery.extend({
Img: "ImgPr",
Width: 100,
Height: 100,
ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
Callback: function () {}
}, opts || {});
_self.getObjectURL = function (file) {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(file);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(file);
}
return url;
};
_this.change(function () {
if (this.value) {
if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
alert("选择文件错误,图片类型必须是" + opts.ImgType.join(",") + "中的一种");
this.value = "";
if('headIconImgShow' != opts.Img) {//wuwei添加2016-03-30
$("#" + opts.Img).attr('src', "");//liuhu添加20160120
}
return false;
} //Jquery 1.3 : 1.3以后就不建议使用了:$.browser.msie && $.browser.version,你目前使用的组件里可能还有应用。
//JQuery 1.7 : 1.7
//JQuery 1.9 : 1.9之后,支持$.support.msie
//具体浏览器版本判断方案:
//http://zhidao.baidu.com/link?url=LftOa4QYHnDBuOj1HHEnUbmuIgbvd9Ka_yCKWbofx-wDw12l90lIZWn4zyQniwNOE_5vqPj-q9cqRZRFoQnL8q
//http://www.jb51.net/article/50463.htm
//http://my.oschina.net/ffwcn/blog/213708 //上边说了一大堆,浏览器版本判断来判断去,这里的代码,无非是想确定files是否被浏览器支持,就不如快刀斩乱麻,不抛异常就是支持,否则就是不支持。
try {
$("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]));
} catch (e) {
var src = "";
var obj = $("#" + opts.Img);
var div = obj.parent("div")[0];
_self.select();
if (top != self) {
window.parent.document.body.focus();
} else {
_self.blur();
}
src = document.selection.createRange().text;
document.selection.empty();
obj.hide();
obj.parent("div").css({
'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
'width': opts.Width + 'px',
'height': opts.Height + 'px'
});
div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src;
}
opts.Callback();
}
})
}
});

原作者写这个插件时,可能随手,就用了JQuery1.9的新方法$.support.msie,而我的现实情况是,项目已经用了JQuery1.7,我可不敢贸然升级到1.9(搞不好,吃不了兜着走)。

我个人推断作者的思路是,是想通过判断浏览器的类型和版本来确定是否支持input的files特性(作者说了不支持safari,当然连苹果都不发布window版的safari,还支持个毛线)。

如果是IE,是IE10及其以上版本,也支持files;是IE9及以下版本,则不支持files,调用files自然会抛出异常,通过捕获异常,采用workaroud方案绕过去。非IE,认为都是webkit,都理所当然是标准的支持files。

作者要求JQuery1.9,我们只用JQuery1.7,那就只好改写$.support.msie,网上判断IE版本的最佳方案,就是正则表达式。可问题是现在IE11之后的Edge,没准agent里已经不包含msie这个字符了,至少我用正则没进去。

干脆思路跳出来,快刀斩乱麻,参照原作者那部分的思路,管你啥版本,无非要判断浏览器是否支持files,试一下不就知道了,不抛异常就支持,否则捕获异常就按IE9下的workaround方案执行。

这样以后,管你微软出个狗屁(呵呵,我们家小点点【2岁】最近学会很爱用的骂人词)浏览器,这代码依然健壮如泰山。

JQuery插件:图片上传本地预览插件,改进案例一则。的更多相关文章

  1. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  2. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  3. uploadPreview 兼容多浏览器图片上传及预览插件使用

    uploadPreview兼容多浏览器图片上传及预览插件 http://www.jq22.com/jquery-info2757 Html 代码 <div class="form-gr ...

  4. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

  5. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

  6. ThinkPHP5与JQuery实现图片上传和预览效果

    内容正文 这篇文章主要为大家详细介绍了thinkphp上传图片功能,和jquery预览图片效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 先上效果图: html和js代码如下: <!DO ...

  7. HTML5图片上传本地预览

    在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...

  8. jQuery:[1]实现图片上传并预览

    jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. 从头到尾使用Geth的说明-2-cli可用命令-有2个地方标红,之后查查源码后看看能不能解决

    geth - the go-ethereum command line interface 以太坊命令行接口 格式: geth [options] command [command options] ...

  2. js点滴

    1. promise用法 https://www.cnblogs.com/lvdabao/p/es6-promise-1.html https://segmentfault.com/a/1190000 ...

  3. Linux下rz/sz安装及使用方法

    新搞的云服务器用SecureCRT不支持上传和下载,没有找到rz命令.记录一下如何安装rz/sz命令的方法. 一.工具说明 在SecureCRT这样的ssh登录软件里, 通过在Linux界面里输入rz ...

  4. 【Codeforces 1137A】Skyscrapers

    Codeforces 1137 A 题意:给一个矩阵,问对于每一个格子\((x,y)\),把第\(x\)行和第\(y\)列的值取出,要求将它们每一个赋上一个正整数,要求同一行.列中大小关系依然相同,问 ...

  5. Android学习之基础知识四-Activity活动4讲(Intent传递数据)

    Intent除了可以开启一个活动,还能在启动活动的时候传递数据,此时Intent相当于一个保存数据的库,我们先把数据保存在Intent中,然后再根据各个activity的需要从其中取出数据.  一.使 ...

  6. 动手动脑(lesson 4)

    一. 解答: 二. 解答: 三. 实现方法代码示例: 四. 原理:连续调用特点是返回值类型为同一个类型,且与等号左边的类型一致,这样就可以连续调用了. 代码: public class MyCount ...

  7. C语言学习快速笔记

    想看java底层的代码,调用了native方法,所以简单的学习了下C,看的是C程序设计语言这本书,主要是在学习基本语法,关于操作系统指令这块都没看. #define关键字用来定义常量,(定义和声明不一 ...

  8. Javascript 对象复制

    如果对象只是一个数据集,可采用json化再反json化的方式克隆一个对象,这个过程会丢失对象的方法.效率比较低. 可以采用如下递归的方式复制一个对象. function clone(target) { ...

  9. Asp.Net MVC页面显示后台处理进度问题

    这个问题的背景是,用户通过浏览器上传文件或Excel数据到系统中,页面需要时时显示后台处理进度,以增强用户的体验. 在GitHub上找到一个一个项目,基本实现了这个功能,具体效果如下图 代码实现过程大 ...

  10. IOC框架之Ninject 简介

    还是那几句话: 学无止境,精益求精 十年河东,十年河西,莫欺少年穷 学历代表你的过去,能力代表你的现在,学习代表你的将来 上篇博客介绍了依赖注入的三种方式:构造方法注入,属性注入,接口注入!详情请参考 ...