tpl_upload.html 12 KB

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