图片上传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. laravel中资源路由的控制器创建方法：

    php artisan make:controller Admin\ArticleController --resource 上面的创建方法是,创建控制器文件夹下的Admin文件下的ArticleCo ...

  2. C#读写配置文件Config

    应用程序配置文件是标准的XML文件,XML标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是configuration.我们经 ...

  3. 从客户端中检测到有潜在危险的 Request.Form 值 方法

    由于在.net中,Request时出现有HTML或Javascript等字符串时,系统会认为是危险性值.立马报出“从客户端 中检测到有潜在危险的Request.Form值”这样的错. 解决方案一:   ...

  4. URAL 1040 Airline Company 构造,思路 难度:2

    http://acm.timus.ru/problem.aspx?space=1&num=1040 题目要求在一个联通无向图中找出一种方法给边标号使得任意一个有多条边的点,边的号码的最大公约数 ...

  5. centos7 搭建svn服务器&客户端的访问&备份迁移

    当今用于版本控制的软件程序主要的有svn和git,其它软件咱不熟悉,今天记录下搭建svn服务器和svn客户端使用: 使用环境:虚拟机为centos7系统,svn服务器安装在centos7系统平台上,s ...

  6. 解决Jenkins 中无法展示 HTML 样式的问题

    问题 将本地的jmeter脚本部署到Jenkins上时,可以运行成功也可以在本地生成正确的HTML.但在Jenkins中查看HTML report时内容显示不出来. because the docum ...

  7. L177 Arctic ice brings an understanding of ancient Europe’s economy

    Greenland's icy mountains are not an obvious place to search for an archive of economic history, but ...

  8. MySQL 服务正在启动 .MySQL 服务无法启动。系统出错。发生系统错误 1067。进程意外终止。

    MySQL 服务正在启动 .MySQL 服务无法启动.系统出错.发生系统错误 1067.进程意外终止. 检查了一个晚上才发现是---配置问题 #Path to installation directo ...

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

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

  10. (简单)冒泡和直接选择排序同时调用swap算法

    void swap(int &a , int &b) { int temp; temp = a; a=b; b=temp; } void bubble(int a[],int n) { ...