tpl_upload.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379
  1. <html xmlns="http://www.w3.org/1999/xhtml">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <script language="javascript" src="js/jquery.js"></script>
  5. <script language="javascript" src="js/js.js"></script>
  6. <link rel="stylesheet" type="text/css" href="<?=$da['p']?>/css/rock.css"/>
  7. <title><?=$da['title']?></title>
  8. <script language="javascript">
  9. var callback= '<?=$params['callback']?>',
  10. maxup = <?=$params['maxup']?>,
  11. uptype = '<?=str_replace(',','|',$params['uptype'])?>',
  12. thumbnail = '<?=$params['thumbnail']?>',
  13. maxwidth = '<?=$params['maxwidth']?>',
  14. showid = '<?=$params['showid']?>',
  15. upkey = '<?=$params['upkey']?>',
  16. urlparams = <?=$params['urlparams']?>,
  17. thumbtype = '<?=$params['thumbtype']?>';//缩略图类型0可能去掉看不到的默认, 1整图缩略可以看到白
  18. var up={
  19. filearr:[],
  20. bool:false,
  21. maxsize:<?=$params['maxsize']?>,
  22. moi:0,
  23. wcarr:[],
  24. init:function()
  25. {
  26. if(typeof(FormData)=='undefined'){
  27. $('body').prepend('<div style="color:red;padding:2px;border:1px #dddddd solid;margin:5px">对不起,您的浏览器不支持上传功能,请使用IE10+,火狐,Opera,谷歌浏览器</div>');
  28. }else{
  29. this.reader=true;
  30. }
  31. var bol = true;
  32. try{if(parent.js.uploadrand!=upkey){bol=false;}}catch(e){bol=false;}
  33. if(!bol){
  34. try{if(opener.js.uploadrand==upkey){bol=true;}}catch(e){}
  35. }
  36. if(!bol){
  37. $('body').prepend('<div style="color:red;padding:2px;border:1px #dddddd solid;margin:5px">不正当访问本页面,不能操作</div>');
  38. this.reader = false;
  39. }
  40. if(!this.reader){
  41. get('addbtn').disabled=true;
  42. get('clearbtn').disabled=true;
  43. get('startbtn').disabled=true;
  44. }
  45. this.obj=$('#upfile');
  46. var fmsg = '';
  47. if(maxup!=0)fmsg=',最多可添加'+maxup+'个文件';
  48. if(uptype!='*')fmsg+=',限制'+uptype+'类型';
  49. if(fmsg!='')fmsg=fmsg.substr(1);
  50. $('#footmsg').html(fmsg);
  51. window.addEventListener('drop', function(e) {
  52. var files = e.dataTransfer;
  53. up.change(files);
  54. }, false);
  55. },
  56. add:function()
  57. {
  58. if(!this.reader||this.bool)return false;
  59. if(maxup!=0){
  60. if(this.gsize()>=maxup){
  61. js.msg('msg','最多可添加'+maxup+'个文件');
  62. return false;
  63. }
  64. }
  65. document.myform.inputfile.click();
  66. return false;
  67. },
  68. rand:function()
  69. {
  70. var rand = ''+js.now('d_His')+''+parseInt(Math.random()*9999)+'';
  71. return rand;
  72. },
  73. change:function(o){
  74. this.objfile = o.files;
  75. this.change1(0);
  76. },
  77. change1:function(oi)
  78. {
  79. var obja = this.objfile;
  80. if(maxup!=0){
  81. if(this.gsize()>=maxup){
  82. this.rexushow();
  83. return false;
  84. }
  85. }
  86. if(oi>=obja.length){
  87. setTimeout('document.myform.reset()',500);
  88. this.rexushow();
  89. return false;
  90. }
  91. var file = obja[oi];
  92. if(!file || file.name=='/'){
  93. up.change1(oi+1);
  94. return false;
  95. }
  96. var olen = this.filearr.length;
  97. var filesize = file.size;
  98. var filesizecn = js.formatsize(filesize);
  99. var filename = file.name;
  100. var fileext = filename.substr(filename.lastIndexOf('.')+1).toLowerCase();
  101. var filetype = file.type;
  102. if(uptype!='*' && uptype!=''){
  103. var uobo = true;
  104. if(uptype=='image'){
  105. if(filetype.indexOf('image')<0)uobo=false;
  106. }else{
  107. var auptsype = '|'+uptype+'|';
  108. if(auptsype.indexOf('|'+fileext+'|')<0)uobo=false;
  109. }
  110. if(!uobo){
  111. var tstype = uptype;
  112. if(tstype=='image')tstype='jpg,png,gif,bmp,jpeg';
  113. js.msg('msg','['+filename+']文件类型不符合,请选择类型为['+tstype+']的文件');
  114. up.change1(oi+1);
  115. return false;
  116. }
  117. }
  118. if(filesize>this.maxsize*1024*1024){
  119. js.msg('msg','['+filename+']文件超过'+this.maxsize+' MB,当前文件大小'+filesizecn+'');
  120. up.change1(oi+1);
  121. return false;
  122. }
  123. //回调的验证
  124. <?php if($params['changeback']!=''){?>
  125. try{
  126. var tisr = parent.<?=$params['changeback']?>(file);
  127. if(tisr && typeof(tisr)=='string'){
  128. js.msg('msg',tisr);
  129. up.change1(oi+1);
  130. return false;
  131. }
  132. }catch(e){}
  133. <?php }?>
  134. this.moi++;
  135. for(var i=0;i<olen;i++){
  136. if(this.filearr[i].filename==filename && this.filearr[i].filesize==filesize){
  137. js.msg('msg','['+filename+']已添加,请不要选择重复文件!');
  138. up.change1(oi+1);
  139. return false;
  140. }
  141. }
  142. var arr={filename:filename,filesize:filesize,filesizecn:filesizecn,filetype:filetype,fileext:fileext,xu:this.moi,fileobj:file};
  143. var noi = this.filearr.push(arr);
  144. var fis= 'web/images/fileicons/'+js.filelxext(fileext)+'.gif';
  145. var s='<div class="mdiv" upload="true">'+
  146. '<div class="div01"><span>1. </span><img src="'+fis+'" width="16" height="16" align="absmiddle"> <font>'+filename+'</font>,<a onclick="up.editname('+(noi-1)+', this)" href="javascript:;">改名</a></div>'+
  147. '<div class="div02">'+filesizecn+'</div>'+
  148. '<div class="div03" id="updeng'+this.moi+'">初始化文件...</div>'+
  149. '</div>';
  150. if(get('upfilemsg'))$('#upfilemsg').remove();
  151. this.obj.append(s);
  152. $('#updeng'+up.moi+'').html('等待上传...<a href="javascript:" temp="del" onclick="return up.del(this,'+olen+')">×</a>');
  153. setTimeout('up.change1('+(oi+1)+');',5);
  154. },
  155. editname:function(oi,o1){
  156. var arr = this.filearr[oi];
  157. if(!arr){
  158. $(o1).remove();
  159. return;
  160. }
  161. var nae = arr.filename.replace('.'+arr.fileext+'','');
  162. js.prompt('改名','输入新的文件名称',function(jg,txt){
  163. if(jg=='yes' && txt){
  164. var nname = txt+'.'+arr.fileext+'';
  165. up.filearr[oi].filename = nname;
  166. $(o1).parent().find('font').html(nname);
  167. }
  168. }, nae);
  169. },
  170. del:function(o,oi)
  171. {
  172. $(o).parent().parent().remove();
  173. this.filearr[oi]=false;
  174. this.rexushow();
  175. return false;
  176. },
  177. gsize:function()
  178. {
  179. var olen = this.filearr.length;
  180. var ol = 0;
  181. for(var i=0;i<olen;i++){
  182. if(this.filearr[i])ol++;
  183. }
  184. return ol;
  185. },
  186. upload:function()
  187. {
  188. if(this.bool)return false;
  189. var olen = this.filearr.length;
  190. this.uparr = [];
  191. var ol = 0;
  192. for(var i=0;i<olen;i++){
  193. if(this.filearr[i]){
  194. this.uparr.push(this.filearr[i]);
  195. ol++;
  196. }
  197. }
  198. if(ol==0){
  199. js.msg('msg','请添加上传文件');
  200. return false;
  201. }
  202. this.filearr=[];
  203. get('addbtn').disabled=true;
  204. get('quebtn').disabled=true;
  205. get('clearbtn').disabled=true;
  206. get('startbtn').disabled=true;
  207. this.bool = true;
  208. $("a[temp='del']").remove();
  209. $('#prou').show();
  210. $('#proushow').html('等待上传('+ol+'/<font id="nowupspan">0</font>)[<font id="allbili">0%</font>]...');
  211. $('#proudiv').css('width','0%');
  212. this.start(0);
  213. return false;
  214. },
  215. start:function(oi)
  216. {
  217. if(oi==this.uparr.length){
  218. $('#proushow').html('<font color=white>上传完成</font>');
  219. get('addbtn').disabled=false;
  220. get('clearbtn').disabled=false;
  221. get('startbtn').disabled=false;
  222. get('quebtn').disabled=false;
  223. this.bool = false;
  224. return false;
  225. }
  226. this.suarr = this.uparr[oi];
  227. this.suarr.xuoi = oi;
  228. this.updengid= 'updeng'+this.suarr.xu+'';
  229. $('#'+this.updengid+'').html('<font color=#ff6600>正在上传(<span id="bilishow">0</span>%)...</font>');
  230. $('#nowupspan').html(oi+1);
  231. this.jdt(0);
  232. var xhr = new XMLHttpRequest();
  233. urlparams.maxsize=up.maxsize;
  234. if(uptype && uptype!='*')urlparams.uptype=uptype;
  235. if(thumbnail)urlparams.thumbnail=thumbnail;
  236. var url = js.getajaxurl('upfile','upload','public', urlparams);
  237. xhr.open('POST', url, true);
  238. xhr.onreadystatechange = function(){
  239. };
  240. xhr.upload.addEventListener("progress", function(evt){
  241. var loaded = evt.loaded;
  242. var tot = evt.total;
  243. var per = Math.floor(100*loaded/tot);
  244. up.jdt(per);
  245. $('#bilishow').html(per);
  246. }, false);
  247. xhr.addEventListener("load", function(){
  248. up.upsuccess(this.response, this.status);
  249. }, false);
  250. xhr.addEventListener("error", function(){
  251. $('#'+up.updengid+'').html('<font color=red>上传失败0</font>');
  252. }, false);
  253. var fd = new FormData();
  254. fd.append('file', this.suarr.fileobj, this.suarr.filename);
  255. xhr.send(fd);
  256. },
  257. upsuccess:function(bstr, code){
  258. var arr = this.suarr;
  259. var o1s = $('#'+up.updengid+'');
  260. if(code!=200){
  261. o1s.html('<font color=red>失败:'+code+'</font>');
  262. js.msg('msg', bstr, 0);
  263. }else{
  264. o1s.html('<font color=green>上传成功</font>');
  265. var result = js.decode(bstr);
  266. if(result.id){
  267. up.wcarr.push({id:result.id,filename:arr.filename,filetype:arr.filetype,fileext:arr.fileext,filesize:arr.filesize,filesizecn:arr.filesizecn,filepath:result.filepath,thumbpath:result.thumbpath,width:result.width,height:result.height});
  268. }else{
  269. o1s.html('<font color=red>上传失败1,保存失败</font>');
  270. js.msg('msg',result.msg, 0);
  271. }
  272. }
  273. setTimeout('up.start('+(arr.xuoi+1)+')',5);
  274. },
  275. jdt:function(bl){
  276. $('#allbili').html(bl+'%');
  277. $('#proudiv').css('width',''+bl+'%');
  278. },
  279. unload:function(){
  280. return false;
  281. },
  282. clear:function()
  283. {
  284. $('#prou').hide();
  285. this.wcarr =[];
  286. this.filearr=[];
  287. this.obj.html('');
  288. },
  289. rexushow:function(){
  290. var o = $('#upfile').find('span');
  291. for(var i=0;i<o.length;i++){
  292. o[i].innerHTML=''+(i+1)+'. ';
  293. }
  294. },
  295. getsid:function(a){
  296. var sid = '',i;
  297. for(i=0;i<a.length;i++){
  298. sid+=','+a[i].id+'';
  299. }
  300. if(sid!='')sid = sid.substr(1);
  301. return sid;
  302. },
  303. okla:function(){
  304. var sid = this.getsid(this.wcarr);
  305. <?php if($callback!=''){?>try{parent.<?=$callback?>(this.wcarr,js.request('params1'), js.request('params2'), sid)}catch(e){}<?php }?>
  306. if(showid!=''){
  307. try{parent.js.downupshow(this.wcarr, showid);}catch(e){}
  308. try{opener.js.downupshow(this.wcarr, showid);}catch(e){}
  309. }
  310. this.closeaa();
  311. },
  312. closeaa:function(){
  313. window.close();
  314. try{parent.js.tanclose('uploadwin')}catch(e){}
  315. }
  316. }
  317. window.onbeforeunload=function(){
  318. if(up.bool)return '文件正在上传,确定要关闭页面吗?';
  319. }
  320. document.ondragover=function(e){e.preventDefault();};
  321. document.ondrop=function(e){e.preventDefault();};
  322. </script>
  323. <style type="text/css">
  324. <?php
  325. $maincolor = getconfig('apptheme','#1389D3');
  326. ?>
  327. .alert{ padding:1px 5px; border:1px #996 solid; background-color:#ffffff; color:<?=$maincolor?>}
  328. .mdiv{ border-bottom:var(--border);display:inline-block;width:100%}
  329. .mdiv div{ float:left; line-height:22px; overflow:hidden; padding:5px 3px}
  330. .div01{ width:55%;text-align:left;border-right:var(--border);}
  331. .div02{ width:15%; text-align:center;border-right:var(--border);}
  332. .div03{ width:25%;text-align:left}
  333. #prou{overflow:hidden; background-color:#ffffff; margin:5px 0px; border:1px #666 solid;padding:0px; text-align:left;font-size:12px; position:relative; height:18px;line-height:18px}
  334. #prou span{ left:5px; position:absolute; top:2px}
  335. #proudiv{ position:absolute; left:0px; top:0px; height:18px; overflow:hidden; background-color:<?=$maincolor?>;width:0%}
  336. button{ cursor:pointer}
  337. #footmsg{ text-align:left; padding:3px}
  338. .quebntha{position:fixed;right:10px;bottom:10px;}
  339. .webbtn{height:34px}
  340. </style>
  341. <?php
  342. echo c('color')->getApptheme();
  343. ?>
  344. </head>
  345. <body style="padding:1px" onLoad="up.init()">
  346. <center>
  347. <form name="myform" style="display:none"><input type="file" name="inputfile" id="inputfileid" <?php if($params['maxup']!=1)echo 'multiple';?> onChange="up.change(this)"></form>
  348. <div align="left" style="padding:3px"></div>
  349. <div style="padding:0px 5px">
  350. <table width="100%" border="0" cellspacing="0" cellpadding="0">
  351. <tr>
  352. <td align="left"><button type="button" class="webbtn" id="addbtn" onClick="up.add()">+添加文件</button>&nbsp; <button type="button" class="webbtn" id="clearbtn" onClick="up.clear()">-清除所有文件</button>&nbsp; <button type="button" class="webbtn" onClick="up.closeaa()">关闭</button></td>
  353. <td align="right"><button type="button" class="webbtn" id="startbtn" onClick="up.upload()">开始上传</button></td>
  354. </tr>
  355. </table>
  356. </div>
  357. <div style="overflow:hidden; height:5px"></div>
  358. <div id="prou" style="display:none"><div id="proudiv"></div><span id="proushow">等待上传...</span></div>
  359. <div class="mdiv" style="background-color:var(--main-bgcolor);border-top:var(--border)">
  360. <div class="div01">文件名</div>
  361. <div class="div02">大小</div>
  362. <div class="div03">状态</div>
  363. </div>
  364. <div id="upfile"><div id="upfilemsg" style="padding:10px;font-size:16px;color:#888888">可拖动文件到空白区域</div></div>
  365. <div id="footmsg"></div>
  366. <div class="quebntha"><button type="button" disabled style="padding:5px 15px" class="webbtn" id="quebtn" onClick="up.okla()">确定</button></div>
  367. </center>
  368. </body>
  369. </html>
粤ICP备19079148号