做项目时一同事推荐的一个picload插件，实现图片上传后，即时预览效果，感觉很不错，分享出来。
点击上传图片后。立即看到预览的效果如下图：
布局代码：
<div class="banner" id="CoupicPicYes">图片预览</div> <a class="input-file" href="javascript:void(0);" onclick="$(‘#photoUpload‘).click()" >
+ 上传图片<input type="file" name="file" id="photoUpload" />
</a>
这里用自定义的按钮代替了默认的图片上传按钮……（为了美观，美是一种追求~~~）
css:代码：
.input-file{position: relative;overflow: hidden;text-align: center; width: auto; color: green; background-color: #fff; }
.input-file input[type="file"]{ position: absolute; top: 0; right: 0; height: 40px; opacity: 0;}
我们只需要在页面上引入一下js代码即可，图片大小可以自由设置。
script引入代码：
<script>
$("#photoUpload").uploadImgs({
isMB:true,//图片大小限制是否为mb，默认是MB
imgSize:‘2048‘,//图片限制大小,默认2M
file:‘图片‘,//图片或者文件的提示信息
imgClass:‘Img‘,//显示图片的img
tipCallback:null,//错误提示回调函数,参数obj,bool<错误false或正确true提示>,value<提示信息>
afterUpload:null//图片上传后的回调函数，参数src,obj
});
</script>
最后附上picloade.js插件代码：
1 /**
2 * @js调用方法:
3 * $(object).uploadImgs({
4 * isMB:true,//图片大小限制是否为mb，默认是MB
5 * imgSize:‘2048‘,//图片限制大小,默认2M
6 * file:‘图片‘,//图片或者文件的提示信息
7 * imgClass:‘Img‘,//显示图片的img
8 * tipCallback:null,//错误提示回调函数,参数obj,bool<错误false或正确true提示>,value<提示信息>
9 * afterUpload:null//图片上传后的回调函数，参数src,obj
10 * });
11 *
12 */
13 (function($) {
14 var opt,ele;
15 $.fn.uploadImgs=function(config){
16 config = $.extend(require.defaults, config || {});
17 opt=config;
18 ele=this;
19 return (new require())._init();
20 };
21 function require(options) {};
22 require.prototype = {
23 _init: function() {
24 var id=$(ele).attr("id"),that=this,
25 x=document.getElementById(id);
26 $(ele).unbind("change").bind("change",function(){//上传图片
27 that._getImg(x,$("#"+id));
28 });
29 },
30 _getImg:function(x,obj){
31 var pasts=opt.isMB ? opt.imgSize / 1024 +"M" : opt.imgSize+"kb",that=this;
32 if(!x || !x.value) return;
33 var user= obj.attr("accept")=="" || !obj.attr("accept") ? "jpg,jpeg,gif,bmp,png" : obj.attr("accept");
34 eval(that._accept(user));
35 if(patn.test(x.value)){//判断是否是图片
36 if (x.files && x.files[0])
37 {
38 var size=Math.ceil(x.files[0].size / 1024);//判断图片大小
39
40 if(size > opt.imgSize)
41 {
42 var value=opt.file+"大小不能超过"+pasts;
43 opt.tipCallback && $.isFunction(opt.tipCallback) ? opt.tipCallback.call(that,obj,false,value) : that._tips(obj,false,value);
44 return;
45 }
46 var reader = new FileReader();
47 reader.readAsDataURL(x.files[0]);
48 reader.onload = function(evt){
49 $("."+opt.imgClass).attr("src",evt.target.result).attr("hasImg",true);
50 if(opt.afterUpload && $.isFunction(opt.afterUpload)){
51 opt.afterUpload.call(that,evt.target.result,obj);
52 }
53 }
54 }else{//ie
55 var img= new Image();
56 var _val=that._getPath(x);
57 img.src=x.value;
58 var size=Math.ceil(img.fileSize / 1024);
59 if(size>opt.imgSize)
60 {
61 var value=opt.file+"大小不能超过"+pasts;
62 opt.tipCallback && $.isFunction(opt.tipCallback) ? opt.tipCallback.call(that,obj,false,value) : that._tips(obj,false,value);
63 return;
64 }
65 _val = _val.replace(‘ ‘,‘%20‘);
66 var aa=$(‘<div class="adddivs" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src=‘+_val+‘); WIDTH: ‘+opt.imgWidth+‘px; HEIGHT: ‘+opt.imgHeight+‘px;max-width:100%;max-height:100%"></div>‘);
67 if($("."+opt.imgClass).parent().find(".adddivs").length>0){
68 $("."+opt.imgClass).parent().find(".adddivs").remove();
69 }
70 $("."+opt.imgClass).after(aa);
71 $("."+opt.imgClass).hide();
72 if(opt.afterUpload && $.isFunction(opt.afterUpload)){
73 opt.afterUpload.call(that,evt.target.result,obj);
74 }
75 }
76 var value="上传成功";
77 opt.tipCallback && $.isFunction(opt.tipCallback) ? opt.tipCallback.call(that,obj,true,value) : that._tips(obj,true,value);
78 }else{
79 var s="请上传"+user+"格式的"+opt.file;
80 opt.tipCallback && $.isFunction(opt.tipCallback) ? opt.tipCallback.call(that,obj,false,s) : that._tips(obj,false,s);
81 }
82 },
83 _accept:function(user){
84 var a="var patn = /\\.";
85 for(var i=0;i<user.split(",").length;i++)
86 {
87 if(i==user.split(",").length-1)
88 a += user.split(",")[i];
89 else
90 a += user.split(",")[i]+"|\\.";
91 }
92 a+="$/i;";
93 return a;
94 },
95 _tips:function(obj,bool,value){
96 var tip=obj.parent().next(".error_tips");
97 tip.text(value);
98 if(bool){tip.addClass("c-blue").removeClass("c-red");}
99 else{tip.addClass("c-red").removeClass("c-blue");}
100 },
101 _getPath:function(obj){
102 if(obj)
103 {
104 if (window.navigator.userAgent.indexOf("MSIE")>=1){
105 obj.select();
106 return document.selection.createRange().text;
107 }else if(window.navigator.userAgent.indexOf("Firefox")>=1)
108 {
109 if(obj.files) return obj.files.item(0).getAsDataURL();
110 return obj.value;
111 }
112 return obj.value;
113 }
114 }
115 };
116 require.defaults = {
117 isMB:true,//图片大小限制是否为mb，默认是MB
118 imgSize:‘2048‘,//图片限制大小,默认2M
119 file:‘图片‘,//图片或者文件的提示信息
120 imgClass:‘Img‘,//显示图片的img
121 tipCallback:null,//错误提示回调函数,参数obj,bool<错误false或正确true提示>,value<提示信息>
122 afterUpload:null,//图片上传后的回调函数，参数src,obj
123 imgWidth:80,//用于IE8显示图片div的宽度
124 imgHeight:80//用于IE8显示图片div的高度
125 };
126 })(jQuery);
时间： 2024-12-13 06:38:37