jquery-rockupload.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /**
  2. * 无刷新上传
  3. * createname:雨中磐石
  4. * homeurl:http://www.rockoa.com/
  5. * Copyright (c) 2016 rainrock (xh829.com)
  6. * Date:2016-01-01
  7. */
  8. (function ($) {
  9. maxupgloble = 0;
  10. function rockupload(opts){
  11. var me = this;
  12. var opts = js.apply({inputfile:'',initpdbool:false,initremove:true,uptype:'*',maxsize:5,onchange:function(){},onchangebefore:function(){},upurl:'',onprogress:function(){},urlparams:{},updir:'',onsuccess:function(){},quality:0.7,xu:0,fileallarr:[],autoup:true,oldids:'',
  13. onerror:function(){},fileidinput:'fileid',
  14. onabort:function(){},
  15. allsuccess:function(){}
  16. },opts);
  17. this._init=function(){
  18. for(var a in opts)this[a]=opts[a];
  19. //加载最大可上传大小
  20. if(maxupgloble==0)$.getJSON(js.apiurl('login','getmaxup'),function(res){
  21. try{
  22. if(res.code==200){
  23. var maxup = parseFloat(res.data.maxup);
  24. me.maxsize= maxup;
  25. maxupgloble = maxup;
  26. }}catch(e){}
  27. });
  28. if(maxupgloble>0)this.maxsize= maxupgloble;
  29. if(!this.autoup)return;
  30. if(this.initremove){
  31. $('#'+this.inputfile+'').parent().remove();
  32. var s='<form style="display:none;height:0px;width:0px" name="form_'+this.inputfile+'"><input type="file" id="'+this.inputfile+'"></form>';
  33. $('body').append(s);
  34. }
  35. $('#'+this.inputfile+'').change(function(){
  36. me.change(this, 0);
  37. });
  38. };
  39. this.reset=function(){
  40. if(!this.autoup)return;
  41. var fids = 'form_'+this.inputfile+'';
  42. if(document[fids])document[fids].reset();
  43. };
  44. this.setparams=function(ars){
  45. this.oparams = js.apply({uptype:this.uptype}, ars);
  46. this.uptype=this.oparams.uptype;
  47. };
  48. this.setuptype=function(lx){
  49. this.uptype = lx;
  50. };
  51. this.setupurl=function(ul){
  52. this.upurl = ul;
  53. };
  54. this.click=function(ars){
  55. if(this.upbool)return;
  56. this.setparams(ars);
  57. get(this.inputfile).click();
  58. };
  59. this.clear=function(){
  60. this.fileallarr = [];
  61. this.filearr = {};
  62. this.xu = 0;
  63. $('#'+this.fileview+'').html('');
  64. };
  65. this.changenext=function(max){
  66. var nxd = this.allfilesnow+1;
  67. if(!max)max = 20;
  68. if(nxd>=this.allfileslen || nxd>=max){
  69. if(nxd>1)js.msg('success','共有'+nxd+'个文件全部上传完成');
  70. }else{
  71. this.change(this.allfilesobj, nxd);
  72. }
  73. }
  74. this.change=function(o1,nxd){
  75. if(!o1.files){
  76. js.msg('msg','当前浏览器不支持上传1');
  77. return;
  78. }
  79. if(!nxd)nxd=0;
  80. var f = o1.files[nxd];
  81. this.allfilesobj = o1;
  82. this.allfileslen = o1.files.length;
  83. this.allfilesnow = nxd;
  84. if(!f || f.name=='/')return;
  85. var a = {filename:f.name,filesize:f.size,filesizecn:js.formatsize(f.size)};
  86. if(a.filesize<=0){
  87. js.msg('msg',''+f.name+'不存在');
  88. return;
  89. }
  90. if(this.isfields(a))return;
  91. if(f.size>this.maxsize*1024*1024){
  92. this.reset();
  93. js.msg('msg','文件不能超过'+this.maxsize+'MB,当前文件'+a.filesizecn+'');
  94. return;
  95. }
  96. var nstr = this.onchangebefore(f);
  97. if(nstr){js.msg('msg',nstr);return;}
  98. var filename = f.name;
  99. var fileext = filename.substr(filename.lastIndexOf('.')+1).toLowerCase();
  100. if(!this.uptype)this.uptype='*';
  101. if(this.uptype=='image')this.uptype='jpg,gif,png,bmp,jpeg';
  102. if(this.uptype=='word')this.uptype='doc,docx,pdf,xls,xlsx,ppt,pptx,txt';
  103. if(this.uptype!='*'){
  104. var upss=','+this.uptype+',';
  105. if(upss.indexOf(','+fileext+',')<0){
  106. js.msg('msg','禁止文件类型,请选择'+this.uptype+'');
  107. return;
  108. }
  109. }
  110. a.fileext = fileext;
  111. a.isimg = js.isimg(fileext);
  112. if(a.isimg)a.imgviewurl = this.getimgview(o1);
  113. a.xu = this.xu;
  114. a.f = f;
  115. for(var i in this.oparams)a[i]=this.oparams[i];
  116. this.filearr = a;
  117. var zc=this.fileallarr.push(a);
  118. //如果是图片压缩一下超过1M
  119. if(f.size>1024*1024 && a.isimg && this.quality<1){
  120. this.compressimg(a.imgviewurl,f,function(nf){
  121. a.filesize = nf.size;
  122. a.filesizecn = js.formatsize(nf.size);
  123. me.fileallarr[zc-1].f = nf;
  124. me.nnonchagn(a, nf, zc);
  125. });
  126. }else{
  127. this.nnonchagn(a, f, zc);
  128. }
  129. };
  130. this.nnonchagn=function(a,f,zc){
  131. this.xu++;
  132. this.onchange(a);
  133. this.reset();
  134. if(!this.autoup){
  135. var s='<div style="padding:3px;font-size:14px;border-bottom:1px #dddddd solid"><font>'+a.filename+'</font>('+a.filesizecn+')&nbsp;<span style="color:#ff6600" id="'+this.fileview+'_'+a.xu+'"></span>&nbsp;<a oi="'+(zc-1)+'" id="gm'+this.fileview+'_'+a.xu+'" href="javascript:;">改名</a>&nbsp;<a onclick="$(this).parent().remove()" href="javascript:;">×</a></div>';
  136. $('#'+this.fileview+'').append(s);
  137. $('#gm'+this.fileview+'_'+a.xu+'').click(function(){
  138. me.s_gaiming(this);
  139. });
  140. return;
  141. }
  142. this._startup(f);
  143. };
  144. this.s_gaiming=function(o1){
  145. var o,oi,one,fa;
  146. o = $(o1);
  147. oi = parseFloat($(o1).attr('oi'));
  148. fa = this.fileallarr[oi];
  149. one= o.parent().find('font').html().replace('.'+fa.fileext+'','');
  150. if(get('confirm_main')){
  151. var nr = prompt('新文件名', one);
  152. if(nr){
  153. var newfie = nr+'.'+fa.fileext;
  154. o.parent().find('font').html(newfie);
  155. me.fileallarr[oi].filename=newfie;
  156. }
  157. }else{
  158. js.prompt('修改文件名','新文件名', function(jg,nr){
  159. if(jg=='yes' && nr){
  160. var newfie = nr+'.'+fa.fileext;
  161. o.parent().find('font').html(newfie);
  162. me.fileallarr[oi].filename=newfie;
  163. }
  164. }, one);
  165. }
  166. };
  167. this.compressimg=function(path,fobj,call){
  168. var img = new Image();
  169. img.src = path;
  170. if(!call)call=function(){};
  171. img.onload = function(){
  172. var that = this;
  173. var w = that.width,
  174. h = that.height,
  175. scale = w / h;
  176. var quality = me.quality;//压缩图片质量
  177. var canvas = document.createElement('canvas');
  178. var ctx = canvas.getContext('2d');
  179. var anw = document.createAttribute("width");
  180. anw.nodeValue = w;
  181. var anh = document.createAttribute("height");
  182. anh.nodeValue = h;
  183. canvas.setAttributeNode(anw);
  184. canvas.setAttributeNode(anh);
  185. ctx.drawImage(that, 0, 0, w, h);
  186. var base64 = canvas.toDataURL(fobj.type, quality);
  187. var nfobj = me.base64toblob(base64);
  188. call(nfobj);
  189. }
  190. };
  191. this.base64toblob=function(urlData){
  192. var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
  193. bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  194. while(n--){
  195. u8arr[n] = bstr.charCodeAt(n);
  196. }
  197. return new Blob([u8arr], {type:mime});
  198. };
  199. this.getimgview=function(o1){
  200. try{
  201. return URL.createObjectURL(o1.files.item(this.allfilesnow));
  202. }catch(e){return false;}
  203. };
  204. this.isfields=function(a){
  205. var bo = false,i,d=this.fileallarr;
  206. for(i=0;i<d.length;i++){
  207. if(this.fileviewxu(d[i].xu) && d[i].filename==a.filename && d[i].filesize==a.filesize){
  208. return true;
  209. }
  210. }
  211. return bo;
  212. };
  213. this.sendbase64=function(nr,ocs){
  214. this.filearr=js.apply({filename:'截图.png',filesize:0,filesizecn:'',isimg:true,fileext:'png'}, ocs);
  215. this._startup(false, nr);
  216. };
  217. this.start=function(){
  218. return this.startss(0);
  219. };
  220. this.startss=function(oi){
  221. if(oi>=this.xu){
  222. var ids=''+this.oldids+'';
  223. var a = this.fileallarr;
  224. for(var i=0;i<a.length;i++)if(a[i].id)ids+=','+a[i].id+'';
  225. if(ids!='' && ids.substr(0,1)==',')ids=ids.substr(1);
  226. try{if(form(this.fileidinput))form(this.fileidinput).value=ids;}catch(e){};
  227. this.allsuccess(this.fileallarr, ids); //必须全部才触发
  228. return false;
  229. }
  230. this.nowoi = oi;
  231. var f=this.fileallarr[oi];
  232. if(!f || !this.fileviewxu(f.xu)){
  233. return this.startss(this.nowoi+1);
  234. }
  235. this.filearr = f;
  236. this.onsuccessa=function(f,str){
  237. var dst= js.decode(str);
  238. if(dst.id){
  239. this.fileallarr[this.nowoi].id=dst.id;
  240. this.fileallarr[this.nowoi].filepath=dst.filepath;
  241. }else{
  242. js.msg('msg', str);
  243. this.fileviewxu(this.nowoi, '<font color=red>失败1</font>');
  244. }
  245. this.startss(this.nowoi+1);
  246. }
  247. this.onprogressa=function(f,bil){
  248. this.fileviewxu(this.nowoi, ''+bil+'%');
  249. }
  250. this.onerror=function(){
  251. this.fileviewxu(this.nowoi, '<font color=red>失败0</font>');
  252. this.startss(this.nowoi+1);
  253. }
  254. this._startup(f.f);
  255. return true;
  256. };
  257. this.fileviewxu=function(oi,st){
  258. if(typeof(st)=='string')$('#'+this.fileview+'_'+oi+'').html(st);
  259. return get(''+this.fileview+'_'+oi+'');
  260. };
  261. //初始化文件防止重复上传
  262. this._initfile=function(f){
  263. var a = this.filearr,d={'filesize':a.filesize,'fileext':a.fileext};
  264. if(!a.isimg)d.filename=jm.base64encode(a.filename);
  265. var url = js.apiurl('upload','initfile', d);
  266. $.getJSON(url, function(ret){
  267. if(ret.success){
  268. var bstr = ret.data;
  269. me.upbool= false;
  270. me.onsuccess(a,bstr);
  271. }else{
  272. me._startup(f,false,true);
  273. }
  274. });
  275. };
  276. this._startup=function(fs, nr, bos){
  277. this.upbool = true;
  278. if(this.initpdbool && fs && !bos){this._initfile(fs);return;}
  279. try{var xhr = new XMLHttpRequest();}catch(e){js.msg('msg','当前浏览器不支持2');return;}
  280. this.urlparams.maxsize = this.maxsize;
  281. if(this.updir)this.urlparams.updir=this.updir;
  282. var url = this.upurl;
  283. if(!this.upurl)url = js.apiurl('upload','upfile', this.urlparams);
  284. xhr.open('POST', url, true);
  285. xhr.onreadystatechange = function(){me._statechange(this);};
  286. xhr.upload.addEventListener("progress", function(evt){me._onprogress(evt, this);}, false);
  287. xhr.addEventListener("load", function(){me._onsuccess(this);}, false);
  288. xhr.addEventListener("error", function(){me._error(false,this);}, false);
  289. if(nr)fs = this.base64toblob(nr);
  290. var fd = new FormData();
  291. fd.append('file', fs, this.filearr.filename);
  292. xhr.send(fd);
  293. this.xhr = xhr;
  294. this.upurl = '';
  295. };
  296. this.onsuccessa=function(){
  297. };
  298. this._onsuccess=function(o){
  299. this.upbool = false;
  300. var bstr = o.response;
  301. if(bstr.indexOf('id')<0 || o.status!=200 || bstr.indexOf('"success":false')>-1){
  302. this._error(bstr);
  303. }else{
  304. this.onsuccessa(this.filearr,bstr,o);
  305. this.onsuccess(this.filearr,bstr,o);
  306. }
  307. };
  308. this._error=function(ts,xr){
  309. this.upbool = false;
  310. if(!ts)ts='上传内部错误';
  311. this.onerror(ts);
  312. };
  313. this._statechange=function(o){
  314. };
  315. this.onprogressa=function(){
  316. };
  317. this._onprogress=function(evt){
  318. var loaded = evt.loaded;
  319. var tot = evt.total;
  320. var per = Math.floor(100*loaded/tot);
  321. this.onprogressa(this.filearr,per, evt);
  322. this.onprogress(this.filearr,per, evt);
  323. };
  324. this.abort=function(){
  325. this.xhr.abort();
  326. this.upbool = false;
  327. this.onabort();
  328. };
  329. this._init();
  330. }
  331. $.rockupload = function(options){
  332. var cls = new rockupload(options,false);
  333. return cls;
  334. }
  335. })(jQuery);