图片上传jQuery插件（兼容IE8）

 
图片上传jQuery插件（兼容IE8）
 
html
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>上传图片</title>
 6     <link rel="stylesheet" href="uploadImg.css" />
 7 </head>
 8 <body>
 9     <!--上传图片容器 start-->
10     <div class="picBox"></div>
11     <!--上传图片容器 end-->
12 
13     <script src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
14     <script src="uploadImg.js" type="text/javascript"></script>
15     <script type="text/javascript">
16         $(".picBox").uploadImg({
17             "picNum": 1,//上传图片张数
18             "width": 200,//图片宽度
19             "height": 100//图片高度
20         });
21     </script>
22 </body>
23 </html>

 

css

 1 .fileInput{
 2     display: block;
 3     height:1px;
 4     overflow: hidden;
 5     opacity: 0;
 6     filter:alpha(opacity=0);
 7 }
 8 .previewBox{
 9     margin:15px 0;
10 }
11 .previewBox img{
12     margin-right:10px;
13 }
14 .uploadBtn{
15     border:1px solid #eee;
16     background: #fff;
17     color:#666;
18     font-size: 16px;
19     line-height: 1.6;
20     padding:6px 15px;
21 }

 

js

  1 /*
  2 *上传图片并本地预览插件
  3 *兼容IE8
  4 *obj    ----上传图片容器
  5 *picNum ----上传图片的张数
  6 *width  ----图片宽度
  7 *height ----图片宽度
  8  */
  9 (function($) {
 10     // 构造函数
 11     function UploadImg(obj,opt) {
 12         debugger;
 13         this.obj = obj;
 14         this.$obj = $(obj);
 15         this.defaultOpt = {
 16             "picNum": 1,
 17             "width": 100,
 18             "height": 100
 19         };
 20         this.num = 0;
 21         this.options = $.extend({},this.defaultOpt,opt);
 22         this.init();
 23     };
 24 // 初始化html
 25 UploadImg.prototype.init = function() {
 26     var html = '<input type="file" class="fileInput">'
 27                 +'<div><button type="button" class="uploadBtn">上传图片</button></div>'
 28                 +'<div class="previewBox"></div>';
 29     this.$obj.append($(html));
 30     this.bindEvent();
 31 }
 32 //绑定事件
 33 UploadImg.prototype.bindEvent = function() {
 34     var self = this;
 35     this.$obj.on("click.choose",".uploadBtn",function() {
 36         $(".fileInput").trigger("click");
 37     });
 38     $(".fileInput").on("change.upload",function() {
 39         self.operationImg(this);
 40     });
 41     this.$obj.off(".choose,.upload");
 42 }
 43 //检查图片格式
 44 UploadImg.prototype.isImg = function(url) {
 45     var result = /.+\.(jpg|png|jpeg|gif)$/.test(url);
 46     if(!result) {
 47         alert("您选择的图片格式有误，请重新选择");
 48         return false;
 49     } else {
 50         return true;
 51     }
 52 },
 53 //添加预览图片到页面上
 54 UploadImg.prototype.addImgHtml = function(url) {
 55     if(this.options.picNum == 1) {
 56         if($(".previewBox")) {
 57             $(".previewBox").html("<img src="+ url +" width="+ this.options.width +" height="+ this.options.height +">");
 58         }
 59     } else {
 60         if($(".previewBox") && this.num < this.options.picNum) {
 61             $(".previewBox").append("<img src="+ url +" width="+ this.options.width +" height="+ this.options.height +">");
 62             this.num++;
 63         }    
 64     }
 65 },
 66 //兼容IE处理
 67 UploadImg.prototype.previewImgIE = function(obj) {
 68     obj.select();
 69     $(obj).blur();
 70     if(document.selection) {
 71         var url = document.selection.createRange().text;
 72         if(this.isImg(url)) {
 73             var imgWrap = "<div class='imgWrap'></div>";
 74             if(this.options.picNum == 1) {
 75                 $(".previewBox").html($(imgWrap));
 76             } else if(this.options.picNum > 1 && this.num < this.options.picNum) {
 77                 $(".previewBox").append($(imgWrap));
 78                 this.num++;
 79             } else {
 80                 return;
 81             };
 82             $(".imgWrap").css({
 83                 "width":this.options.width,
 84                 "height":this.options.height,
 85                 "display":"inline-block",
 86                 "margin-right":"10px",
 87                 "*display":"inline",
 88                 "*zoom":1
 89             });
 90             $(".imgWrap:last").css("filter","progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale,src=\""+url+"\")");
 91         }
 92     }
 93 },
 94 //正常处理
 95 UploadImg.prototype.previewImg = function(obj) {
 96     var file = obj.files[0];
 97     var self = this;
 98     if(this.isImg(file.name)) {
 99         var reader = new FileReader();
100         reader.onload = function(evt) {
101             self.addImgHtml(evt.target.result);    
102         };
103         reader.readAsDataURL(file);
104     } else {
105         alert("您输入的图片格式有误，请重新输入");
106         return false;
107     }
108 };
109 //上传图片操作；
110 UploadImg.prototype.operationImg = function(fileObj) {
111     if(fileObj.files && fileObj.files[0]) {
112         //html5 files API
113         this.previewImg(fileObj);
114     } else {
115         //兼容IE
116         this.previewImgIE(fileObj);
117     }
118 }
119 //绑定插件
120 $.fn.uploadImg= function(options) {
121     return this.each(function() {
122         new UploadImg(this,options);
123     });
124 }
125 })(jQuery);

 

 

 

posted @ 2017-09-04 16:26  微笑的小小向日葵  阅读(735)  评论(0)  编辑  收藏  举报