图片上传jQuery插件（兼容IE8）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>上传图片</title>
<link rel="stylesheet" href="uploadImg.css" />
</head>
<body>
<!--上传图片容器 start-->
<div class="picBox"></div>
<!--上传图片容器 end--> <script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="uploadImg.js" type="text/javascript"></script>
<script type="text/javascript">
$(".picBox").uploadImg({
"picNum": 1,//上传图片张数
"width": 200,//图片宽度
"height": 100//图片高度
});
</script>
</body>
</html>
css
.fileInput{
display: block;
height:1px;
overflow: hidden;
opacity: 0;
filter:alpha(opacity=0);
}
.previewBox{
margin:15px 0;
}
.previewBox img{
margin-right:10px;
}
.uploadBtn{
border:1px solid #eee;
background: #fff;
color:#666;
font-size: 16px;
line-height: 1.6;
padding:6px 15px;
}
js
/*
*上传图片并本地预览插件
*兼容IE8
*obj ----上传图片容器
*picNum ----上传图片的张数
*width ----图片宽度
*height ----图片宽度
*/
(function($) {
// 构造函数
function UploadImg(obj,opt) {
debugger;
this.obj = obj;
this.$obj = $(obj);
this.defaultOpt = {
"picNum": 1,
"width": 100,
"height": 100
};
this.num = 0;
this.options = $.extend({},this.defaultOpt,opt);
this.init();
};
// 初始化html
UploadImg.prototype.init = function() {
var html = '<input type="file" class="fileInput">'
+'<div><button type="button" class="uploadBtn">上传图片</button></div>'
+'<div class="previewBox"></div>';
this.$obj.append($(html));
this.bindEvent();
}
//绑定事件
UploadImg.prototype.bindEvent = function() {
var self = this;
this.$obj.on("click.choose",".uploadBtn",function() {
$(".fileInput").trigger("click");
});
$(".fileInput").on("change.upload",function() {
self.operationImg(this);
});
this.$obj.off(".choose,.upload");
}
//检查图片格式
UploadImg.prototype.isImg = function(url) {
var result = /.+\.(jpg|png|jpeg|gif)$/.test(url);
if(!result) {
alert("您选择的图片格式有误，请重新选择");
return false;
} else {
return true;
}
},
//添加预览图片到页面上
UploadImg.prototype.addImgHtml = function(url) {
if(this.options.picNum == 1) {
if($(".previewBox")) {
$(".previewBox").html("<img src="+ url +" width="+ this.options.width +" height="+ this.options.height +">");
}
} else {
if($(".previewBox") && this.num < this.options.picNum) {
$(".previewBox").append("<img src="+ url +" width="+ this.options.width +" height="+ this.options.height +">");
this.num++;
}
}
},
//兼容IE处理
UploadImg.prototype.previewImgIE = function(obj) {
obj.select();
$(obj).blur();
if(document.selection) {
var url = document.selection.createRange().text;
if(this.isImg(url)) {
var imgWrap = "<div class='imgWrap'></div>";
if(this.options.picNum == 1) {
$(".previewBox").html($(imgWrap));
} else if(this.options.picNum > 1 && this.num < this.options.picNum) {
$(".previewBox").append($(imgWrap));
this.num++;
} else {
return;
};
$(".imgWrap").css({
"width":this.options.width,
"height":this.options.height,
"display":"inline-block",
"margin-right":"10px",
"*display":"inline",
"*zoom":1
});
$(".imgWrap:last").css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src=\""+url+"\")");
}
}
},
//正常处理
UploadImg.prototype.previewImg = function(obj) {
var file = obj.files[0];
var self = this;
if(this.isImg(file.name)) {
var reader = new FileReader();
reader.onload = function(evt) {
self.addImgHtml(evt.target.result);
};
reader.readAsDataURL(file);
} else {
alert("您输入的图片格式有误，请重新输入");
return false;
}
};
//上传图片操作；
UploadImg.prototype.operationImg = function(fileObj) {
if(fileObj.files && fileObj.files[0]) {
//html5 files API
this.previewImg(fileObj);
} else {
//兼容IE
this.previewImgIE(fileObj);
}
}
//绑定插件
$.fn.uploadImg= function(options) {
return this.each(function() {
new UploadImg(this,options);
});
}
})(jQuery);
图片上传jQuery插件（兼容IE8）的更多相关文章
- MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件
场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...
- jquery.attach附件上传jquery插件
html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv=&qu ...
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
- 适应各浏览器图片裁剪无刷新上传jQuery插件（转）
看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...
- 另一种图片上传 jquery.fileupload.js
今天遇到另外一种上传图片方法 用jquery.fileupload.js <input type="file" name="file[]" multipl ...
- 头像截取 图片上传 js插件
先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...
- 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件
项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...
- uploadify插件实现多个图片上传并预览
使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...
- 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码
图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...
随机推荐
- 控制反转（IOC）模式
控制反转(Inversion of Control):提倡实现松耦合层.组件和类的设计原则,颠倒程序的控制流程.IoC使用分离执行特定问题处理代码的概念: IoC意味着将你设计好的对象交给容器控制,而 ...
- JS类型转换之valueOf和toString详解
最近群里有人发了下面这题: 实现一个函数,运算结果可以满足如下预期结果: add(1)(2)// 3 add(1,2,3)(10)// 16 add(1)(2)(3)(4)(5)// 15 对于一个好 ...
- L204
Riding a bike is good exercise and great fun. But what do you do with a bike after you outgrow it? N ...
- 基于spec评论——王者荣耀交流协会的PSP DAILY作品
一.运行环境 win10系统. Visual Studio 2017 二.运行程序及截图 1.进入界面如下图. 2.手动输入 类别 任务 点击开始,自动记录时间.如下图. 3.点击结束按钮,会有提示窗 ...
- MAC远程桌面连接问题
如图,始终提示“证书或相关链无效.” 点击“取消” 点击“编辑连接...” 点击“打开” 点击“安全性” 选择“即使验证失败,也始终连接” OK
- 2018c语言第2次作业
1 删除字符串中数字字符 1.设计思路 (1)主要描述题目算法 第一步:先用for循环比较每个数是否符合删除条件. 第二步:如果符合就把这个数利用交换把这个数提前一位. 2.实验代码 void del ...
- 【转载】一张表看懂LTE和5G NR的区别
转自:微信公众号:网优雇佣军 KPI 物理层
- 浅谈闭包（Closure）
一.闭包 好长时间对于闭包都知道与函数和其环境变量有关系,但是一直没有一个清晰的认识.今天查看了一下维基百科,顺便写下来. 二.闭包的定义 在编程语言中,闭包(语义闭包或函数闭包)是指哪些可以将语义范 ...
- ACM学习历程—HDU2476 String painter（动态规划）
http://acm.hdu.edu.cn/showproblem.php?pid=2476 题目大意是给定一个起始串和一个目标串,然后每次可以将某一段区间染成一种字符,问从起始串到目标串最少需要染多 ...
- NOIP模拟赛(洛谷11月月赛)
T1 终于结束的起点 题解:枚举啊... 斐波那契数 第46个爆int,第92个爆long long.... 发现结果一般是m的几倍左右....不用担心T. #include<iostream ...