图片上传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);