图片上传jQuery插件（兼容IE8）
 
html
 <!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）的更多相关文章

  1. MVC4中基于bootstrap和HTML5的图片上传Jquery自定义控件

    场景:mvc4中上传图片,批量上传,上传前浏览,操作.图片进度条. 解决:自定义jquery控件 没有解决:非图片上传时,会有浏览样式的问题; 解决方案; 1.样式 – bootstrap 的css和 ...

  2. jquery.attach附件上传jquery插件

    html: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta http-equiv=&qu ...

  3. 图片上传JS插件梳理与学习

    项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...

  4. 适应各浏览器图片裁剪无刷新上传jQuery插件（转）

    看到一篇兼容性很强的图片无刷新裁剪上传的帖子,感觉很棒.分享下!~ 废话不多说,上效果图. 一.首先建立如下的一个page <!DOCTYPE html> <html xmlns=& ...

  5. 另一种图片上传 jquery.fileupload.js

    今天遇到另外一种上传图片方法 用jquery.fileupload.js <input type="file" name="file[]" multipl ...

  6. 头像截取 图片上传 js插件

    先看一下整体效果 页面html <div class="row"> <div class="tabs-container"> <u ...

  7. 阿里云OSS图片上传plupload.js结合jq-weui 图片上传的插件

    项目中用到了oss上传,用的plupload,奈何样式上不敢恭维,特别是放在移动端上使用.于是自己把它移植到了jq weui的上传图片组件上. 更改:选择照片后确认即及时上传至oss服务器,不限制上传 ...

  8. uploadify插件实现多个图片上传并预览

    使用uploadify插件可方便实现图片上传功能.兼容ie6.ie7. 上传成功之后使用插件的回调函数读取json数据,根据url实现图片预览. 效果图: 点击浏览文件上传图片,图片依次在右侧显示预览 ...

  9. 图片上传，支持同步/异步、预览（MVC、uploadify异步提交、js预览、ajaxSubmit异步提交）兼容大部分浏览器，含代码

    图片上传代码,支持同步/异步和图片的预览 主要用了两种方式,可兼容大部分浏览器. 第一种使用uploadify异步上传,上传后返回图片路径显示到页面. 每二种使用ajaxSubmit异步上传,为兼容I ...

随机推荐

  1. POJ 2251 Dungeon Master bfs 难度:0

    http://poj.org/problem?id=2251 bfs,把两维换成三维,但是30*30*30=9e3的空间时间复杂度仍然足以承受 #include <cstdio> #inc ...

  2. linux下redis的安装及配置启动

    linux下redis的安装及配置启动 标签: redisnosql 2014-10-24 14:04 19732人阅读 评论(0) 收藏 举报  分类: 数据与性能(41)  wget http:/ ...

  3. 流程设计器jQuery + svg/vml(Demo6 - 增加结点属性及切换)

    到目前流程设计器流程结点的拖拽操作已基本完成,接下来就到结点的属性开发了.前面已经开发过流程模板的属性了,结点属性跟模板属性类似,从属性模板定义copy一份,然后按各结点类型进行调整就ok. 1.先来 ...

  4. excel 应用，右下角的小十字拖拽的时候形成递减的数列

    excel 应用,右下角的小十字拖拽的时候形成递减的数列 2012-12-20 15:16无良小鬼 | 浏览 352 次 比如说我想要这样一列数字201220112010……这样递减的数列,而不是递增 ...

  5. SharpNodeSettings项目，可配置的数据采集，统一的工业数据网关，OPC UA服务器开发，PLC数据发布到自身内存，redis，opc ua，以及数据可视化开发

    本项目隶属于 HslCommunication 项目的SDK套件,如果不清楚HslCommunication组件的话,可以先了解那个项目,源代码地址:https://github.com/dathli ...

  6. 细思极恐-你真的会写java吗？

    文章核心 其实,本不想把标题写的那么恐怖,只是发现很多人干了几年java以后,都自认为是一个不错的java程序员了,可以拿着上万的工资都处宣扬自己了,写这篇文章的目的并不是嘲讽和我一样做java的同行 ...

  7. linux screen 命令详解(转载)

    转载于:http://www.cnblogs.com/mchina/archive/2013/01/30/2880680.html 一.背景 系统管理员经常需要SSH 或者telent 远程登录到Li ...

  8. Hibernate对象的三种状态，瞬时态、持久态、游离态

    1.瞬时态.(new完一个对象,突然断电,内存中没有此对象) hibernate中什么时候的对象为瞬时态呢,当我们new 一个对象时,还没有save时,它就是瞬时态的,当我们delete一个对象时,它 ...

  9. centos7 开放mongodb端口

    CentOS 7 默认没有使用iptables,所以通过编辑iptables的配置文件来开启端口是不可以的 CentOS 7 采用了 firewalld 防火墙 如要查询是否开启27019端口则: 1 ...

  10. 树莓派(raspberry pi)系统开发

    [树莓派(raspberry pi)] 01.在linux环境下给树莓派安装系统及入门各种资料 [树莓派(raspberry pi)] 02.PI3安装openCV开发环境做图像识别(详细版) 出处: ...