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);