上传图片预览,支持IE6

//说明:图片上传预览插件
//上传的时候可以生成固定宽高范围内的等比例缩放图//参数设置:
//width                     存放图片固定大小容器的宽
//height                    存放图片固定大小容器的高
//imgDiv                    页面DIV的JQuery的id
//maxSize                    图片大小最大限制(K)
//imgType                   数组后缀名
//**********************图片上传预览插件*************************
(function ($) {jQuery.fn.extend({uploadPreview: function (opts) {opts = jQuery.extend({width: 0,height: 0,imgDiv: "#imgDiv",maxSize: 300,imgType: ["gif", "jpeg", "jpg", "bmp", "png"],callback: function () { return false; }}, opts || {});//var _self = this;var _this = $(this);var imgDiv = $(opts.imgDiv);imgDiv.width(opts.width);imgDiv.height(opts.height);var version = parseInt($.browser.version, 10);autoScaling = function () {if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";var img_width = imgDiv.width();var img_height = imgDiv.height();if (img_width > 0 && img_height > 0) {var rate = (opts.width / img_width < opts.height / img_height) ? opts.width / img_width : opts.height / img_height;if (rate <= 1) {if (version == 7 || version == 8 || version == 9) imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "scale";imgDiv.width(img_width * rate);imgDiv.height(img_height * rate);} else {imgDiv.width(img_width);imgDiv.height(img_height);}var left = (opts.width - imgDiv.width()) * 0.5;var top = (opts.height - imgDiv.height()) * 0.5;imgDiv.css({ "margin-left": left, "margin-top": top });imgDiv.show();}},createImg = function () {imgDiv.html('');var img = $("<img />");imgDiv.replaceWith(img);imgDiv = img;},_this.change(function () {if (this.value) {if (!RegExp("\.(" + opts.imgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {alert("图片类型必须是" + opts.imgType.join(",") + "中的一种");this.value = "";return false;}imgDiv.hide();if ($.browser.msie && version < 10) {if (version == 6) {var image = new Image();image.onload = function () {if ((image.fileSize / 1024) > opts.maxSize) {alert('图片大小不能超过' + opts.maxSize + 'K');return false;}}image.src = 'file:///' + this.value;createImg();imgDiv.attr('src', image.src);autoScaling();} else {this.select();var img = document.selection.createRange().text;var image = new Image();image.onload = function () {if ((image.fileSize / 1024) > opts.maxSize) {alert('图片大小不能超过' + opts.maxSize + 'K');return false;}}image.src = img;imgDiv.html('');imgDiv.css({ filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image)" });imgDiv.get(0).filters.item("DXImageTransform.Microsoft.AlphaImageLoader").sizingMethod = "image";try {imgDiv.get(0).filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = img;} catch (e) {alert("无效的图片文件!");return;}setTimeout("autoScaling()", 100);}}else {try {var file = null;var size = 0;if (this.files && this.files[0]) {file = this.files[0];size = file.size;} else if (this.files && this.files.item(0)) {file = this.files.item(0);size = file.fileSize;}if ((size / 1024) > opts.maxSize) {alert('图片大小不能超过' + opts.maxSize + 'K');return false;}createImg();//Firefox 因安全性问题已无法直接通过input[file].value 获取完整的文件路径try {//Firefox7.0 以下                                imgDiv.attr('src', file.getAsDataURL());} catch (e) {//Firefox8.0以上                                imgDiv.attr('src', window.URL.createObjectURL(file));}imgDiv.css({ "vertical-align": "middle" });setTimeout("autoScaling()", 100);} catch (e) {//支持html5的浏览器,比如高版本的firefox、chrome、ie10if (this.files && this.files[0]) {if ((this.files[0].size / 1024) > opts.maxSize) {alert('图片大小不能超过' + opts.maxSize + 'K');return false;}var reader = new FileReader();reader.onload = function (e) {imgDiv.attr('src', e.target.result);};reader.readAsDataURL(this.files[0]);setTimeout("autoScaling()", 100);}};}}});}});
})(jQuery);

HTML代码:

  <div style="width: 290px; height: 290px; overflow: hidden; border: 1px solid red;"><div id="imgDiv"></div></div><br><input type="file" value="上传文件"><script>$(document).ready(function () {$("input").uploadPreview({ width: 290, height: 290, imgDiv: "#imgDiv" });});
</script>

 

转载于:https://www.cnblogs.com/sumg/p/5140058.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419112.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

17 | 跳表:为什么Redis一定要用跳表来实现有序集合?

问题&#xff1a;如果数据存储在链表中&#xff0c;就真的没法用二分查找算法了吗&#xff1f;可以对链表进行“改造”&#xff0c;就可以支持类似“二分”的查找算法。 跳表 定义&#xff1a;对链表经过改造之后的数据结构叫做跳表&#xff08;Skip list&#xff09;&#x…

亲和数 杭电2040

古希腊数学家毕达哥拉斯在自然数研究中发现&#xff0c;220的所有真约数(即不是自身的约数)之和为&#xff1a; 1245101120224455110&#xff1d;284。 而284的所有真约数为1、2、4、71、 142&#xff0c;加起来恰好为220。人们对这样的数感到很惊奇&#xff0c;并称之为亲和数…

18 | 散列表(上):Word文档中的单词拼写检查功能是如何实现的?

问题引入 在 Word 里输入一个错误的英文单词&#xff0c;它就会用标红的方式提示“拼写错误”&#xff0c;Word 文本编辑器的拼写检查功能是如何实现的呢&#xff1f;散列表&#xff08;Hash Table&#xff09; 散列表 散列表定义&#xff1a;散列表的英文叫“Hash Table”&…

19 | 散列表(中):如何打造一个工业级水平的散列表?

问题引入&#xff1a;如何实现一个工业级的散列表&#xff1f; 主要要求&#xff1a; 设计一个合适的散列函数&#xff1b;定义装载因子阈值&#xff0c;并且设计动态扩容策略&#xff1b;选择合适的散列冲突解决方法。 对于动态散列表来说&#xff0c;不管我们如何设计散列函…

RTTI: dynamic_cast typeid

dynamic_cast&#xff1a;将基类类型的指针向派生类指针安全转换。多用于下行转换。上行转换时&#xff0c;和static_cast是一样的。C类型转换看这里。而const_cast用来修改类型的const或volatile属性。。。下面主要说多态下的RTTI&#xff1a; 使用条件:  基类应有虚函数。 …

20 | 散列表(下):为什么散列表和链表经常会一起使用?

有两种数据结构&#xff0c;散列表和链表经常会被放在一起使用。常见的使用方式有&#xff1a; 用链表来实现 LRU 缓存淘汰算法&#xff0c;链表实现的 LRU 缓存淘汰算法的时间复杂度是 O(n)&#xff0c;通过散列表可以将这个时间复杂度降低到 O(1)。Redis 的有序集合是使用跳…

“睡服”面试官系列第二十三篇之修饰器(建议收藏学习)

目录 1. 类的修饰 2. 方法的修饰 3. 为什么修饰器不能用于函数&#xff1f; 4. core-decorators.js 4.1autobind 4.2readonly 4.3override 4.4deprecate (别名deprecated) 4.5suppressWarnings 5. 使用修饰器实现自动发布事件 6. Mixin 7. Trait 8. Babel 转码器的…

21 | 哈希算法(上):如何防止数据库中的用户信息被脱库?

问题&#xff1a;对于用户信息中的密码&#xff0c;你会如何存储用户密码&#xff1f;仅仅 MD5 加密一下存储就够了吗&#xff1f;——哈希算法 什么是哈希算法 哈希算法的定义和原理&#xff1a;将任意长度的二进制值串映射为固定长度的二进制值串&#xff0c;这个映射的规则…

冬季小学期 NIIT公司 web前端培训 CSS

外边距合并 http://www.w3school.com.cn/css/css_margin_collapsing.asp div、p、h1 块元素 span行元素 浮动&#xff1a;浮动的框可以向左或向右移动&#xff0c;直到它的外边缘碰到包含框或另一个浮动框的边框为止。 http://www.w3school.com.cn/css/css_positioning_floatin…

22 | 哈希算法(下):哈希算法在分布式系统中有哪些应用?

本节分析哈希算法的其他三个应用&#xff1a;负载均衡、数据分片、分布式存储。这三个应用都跟分布式系统有关。看下哈希算法是如何解决这些分布式问题的。 五&#xff1a;负载均衡 问题&#xff1a;那如何才能实现一个会话粘滞&#xff08;session sticky&#xff09;的负载…

BZOJ 1491: [NOI2007]社交网络( floyd )

floyd...求最短路时顺便求出路径数. 时间复杂度O(N^3) -------------------------------------------------------------------------------------------#include<cstdio>#include<algorithm>#include<cstring>using namespace std;typedef long long ll;con…

前端学习(1731):前端系列javascript之发布窗口布局下

index.vue <template><view class"content"><view class"todo-header"><view class"todo-header_left"><text class"active-text">全部</text><text>10条</text></view><v…

你还不会手写SpringBoot启动器吗

Starter是什么 &#xff1f; Spring Boot 对比 Spring MVC 最大的优点就是使用简单&#xff0c;约定大于配置。不用 Spring MVC 的时候&#xff0c;时不时被 xml 配置文件搞的晕头转向&#xff0c;冷不防还因为 xml 配置上的一点疏忽&#xff0c;导致整个项目莫名其妙的不可用…

Ace教你一步一步做Android新闻客户端(三) JSON数据解析

对于服务器端来说&#xff0c;返回给客户端的数据格式一般分为html、xml和json这三种格式&#xff0c;现在给大家讲解一下json这个知识点&#xff0c; 1 如何通过json-lib和gson这两个json解析库来对解析我们的json数据&#xff0c; 2 以及如何在我们的Android客户端解析来自服…

前端学习(1732):前端系列javascript之插入内容

index.vue <template><view class"content"><view v-if"list.length!0" class"todo-header"><view class"todo-header_left"><text class"active-text">全部</text><text>10条&…

你会通过Docker部署war包吗

1、 使用Docker部署war&#xff0c;必须要用容器&#xff0c;我们就用tomcact容器&#xff0c;其实都是将war包丢到tomcat的webapps目录下&#xff0c;tomcat启动的情况下会自动解压war包。 一种是在Docker中安装tomcat容器的镜像&#xff0c;然后把war包丢到tomcat镜像下weba…

Yii中使用的简单方法

1. $this->render: 输出父模版的内容&#xff0c;将渲染的内容嵌入父模版。 2. $this->renderPartial: 不输出父模版的内容&#xff0c;只对本次渲染的布局内容进行输出。 3. PDostatement::bindValue: 把一个值绑定到一个参数。 PDostatement::bindParam: 绑定一个参数到…