upload.html 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style type="text/css">
  5. html{
  6. background-color:#ebebec;
  7. background-image:-webkit-radial-gradient(center, #ebebec, #b4b4b4);
  8. background-image:-moz-radial-gradient(center, #ebebec, #b4b4b4);
  9. background-image:radial-gradient(center, #ebebec, #b4b4b4);
  10. }
  11. body{
  12. font:15px/1.3 Arial, sans-serif;
  13. color: #4f4f4f;
  14. margin:0;
  15. padding:0;
  16. overflow-x:hidden;
  17. }
  18. a, a:visited {
  19. outline:none;
  20. color:#389dc1;
  21. }
  22. a:hover{
  23. text-decoration:none;
  24. }
  25. section, footer, header, aside{
  26. display: block;
  27. }
  28. .dropBox {width:100vw; height:100vh; margin-top: -200px; padding-top: 200px;}
  29. #upload{
  30. font-family:'PT Sans Narrow', sans-serif;
  31. background-color:#373a3d;
  32. background-image:-webkit-linear-gradient(top, #373a3d, #313437);
  33. background-image:-moz-linear-gradient(top, #373a3d, #313437);
  34. background-image:linear-gradient(top, #373a3d, #313437);
  35. width:450px;
  36. padding:30px;
  37. border-radius:3px;
  38. margin:10px auto 10px;
  39. box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  40. }
  41. #drop{
  42. background-color: #2E3134;
  43. padding: 40px 50px;
  44. margin-bottom: 30px;
  45. border: 20px solid rgba(0, 0, 0, 0);
  46. border-radius: 3px;
  47. /* no external files */
  48. border-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MUU5RTNGRDk4QjFFMjExODE0NkUyMUJBNERDNDk0NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0OEZGM0JBREI3RTcxMUUyODFDRkE4MTU1MDRCRkVBRCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0OEZGM0JBQ0I3RTcxMUUyODFDRkE4MTU1MDRCRkVBRCIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0MUU5RTNGRDk4QjFFMjExODE0NkUyMUJBNERDNDk0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MUU5RTNGRDk4QjFFMjExODE0NkUyMUJBNERDNDk0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PmuiwCwAAAF7SURBVHja7NpRSsMwAIDhZJbdoNLhdXwSvIBPg11CUBS9h7AnbyYr9hAxfRmIfRDdlqx8P2SwPqwjH01gS7y+uV2GEJ7yWOdxFf5RSikMfb9/H2MMbdeFYzWj+33ksc3jtckvL3ncB5VsfBAe8rhY5JeN+aimzQjSmodqahfmoK6aqYufu93BNsFDfdYc73e5Wv245gmpLCBABASIgAARECACAkRABASI/lRzyp+r9b2pufeEWLIE5Jz2kKm/Ee0rp8lfuJYsAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiILPM2d6COdtryRKQc99DnO0tl7O9liwBASIgQAQEiIAICBABASIgQAQEiIAICBABASIgs8zZ3oI522vJEpBz30Oc7S2Xs72WLAEBIiBABASIgAgIEAEBIiBzrZm6OPWz8G9KKYWh7/fvY4yh7bqjffk53s8TUuGSNZiGahpGkDfzUE3bcQ95zmOZx10enTkp0rgxvefx+CXAAFXjX+IoV9pGAAAAAElFTkSuQmCC') 25 repeat;
  49. text-align: center;
  50. text-transform: uppercase;
  51. font-size:16px;
  52. font-weight:bold;
  53. color:#7f858a;
  54. }
  55. #drop a{
  56. background-color:#007a96;
  57. padding:12px 26px;
  58. color:#fff;
  59. font-size:14px;
  60. border-radius:2px;
  61. cursor:pointer;
  62. display:block;
  63. margin-top:12px;
  64. line-height:1;
  65. width:100px;
  66. margin-left: 75px;
  67. }
  68. #drop a:hover{
  69. background-color:#0986a3;
  70. }
  71. #drop input{
  72. display:none;
  73. }
  74. #upload ul{
  75. list-style:none;
  76. margin:0 -30px;
  77. border-top:1px solid #2b2e31;
  78. border-bottom:1px solid #3d4043;
  79. padding: 0;
  80. }
  81. #upload ul li{
  82. background-color:#333639;
  83. background-image:-webkit-linear-gradient(top, #333639, #303335);
  84. background-image:-moz-linear-gradient(top, #333639, #303335);
  85. background-image:linear-gradient(top, #333639, #303335);
  86. border-top:1px solid #3d4043;
  87. border-bottom:1px solid #2b2e31;
  88. padding:15px;
  89. height: 52px;
  90. position: relative;
  91. }
  92. #upload ul li input{
  93. display: none;
  94. }
  95. #upload ul li p{
  96. width: 300px;
  97. overflow: hidden;
  98. white-space: nowrap;
  99. color: #EEE;
  100. font-size: 16px;
  101. font-weight: bold;
  102. position: absolute;
  103. top: 8px;
  104. left: 100px;
  105. }
  106. #upload ul li i{
  107. font-weight: normal;
  108. font-style:normal;
  109. color:#7f7f7f;
  110. display:block;
  111. }
  112. #upload ul li canvas{
  113. top: 5px;
  114. left: 20px;
  115. position: absolute;
  116. }
  117. #upload ul li span{
  118. width: 15px;
  119. height: 12px;
  120. background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAaCAYAAABozQZiAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCOTc5MTBDQ0I3RUYxMUUyOUVBQkNFOURERDIzQkU4NSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCOTc5MTBDQkI3RUYxMUUyOUVBQkNFOURERDIzQkU4NSIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M1IFdpbmRvd3MiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFQUY1MzY0QUU3QjdFMjExODE0NkUyMUJBNERDNDk0NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvX6SiYAAAGjSURBVHjanJRPRMRREMfbNtE19hQlolNdomsRaZUiIlHKdiml7CpFolU6pEOWTUTRJZKIakmHsqQ99UedOiT2lG6xRPSdzFtjGi+/ho99836/78z8Zt7bUN3VfElAKwcRkC/9h/AAPIKmsgDCMNgB3ezvB8m8BQZ4/QkmSVwJbsCcR7gOYrz+Av0gQ2WfgWaGvimphEsgLvwRcEQLypxVLy4KP678cbDnHMqc4GZMiQBU2huX62wWbMqSXLenWeDKW1alr4A13QjZ7YT1AmwDLFhd1KOi0naFf8lVmWYdklHuQTXo8g3eOiT07UOgFXy4zcPB2wpTjAdpcA8iVgbs0yTe8dsi90N3NdEUfifYfwBtPCZn9CzF6wJXlGt8Of3JXCVebAAXfOXIxoTQfVJYlk3n9NgIQGc9LfYpaxRcSzHdkD4jwKoStqujXOy2FUBnzPpGRQHODfErePprzjHVHGf1qom/xCTcVlXkPFMoiocNYQ/PM+MLQOIZJexlUUGsZYBOKaYRPAvhieq0DJCUt45uVZ5LrLXGIQJ0uP8uZ98CDADM9WkEBoK0xwAAAABJRU5ErkJggg==') no-repeat;
  121. position: absolute;
  122. top: 34px;
  123. right: 33px;
  124. cursor:pointer;
  125. }
  126. #upload ul li.working span{
  127. height: 16px;
  128. background-position: 0 -12px;
  129. }
  130. #upload ul li.error p{
  131. color:red;
  132. }
  133. .chart {
  134. position:relative;
  135. margin:0px;
  136. width:48px; height:48px;
  137. }
  138. .fileInfo {
  139. text-align: center;
  140. font-size: 16px;
  141. font-weight: bold;
  142. color: #7f858a;
  143. margin-top: 24px;
  144. margin-bottom: 24px;
  145. text-transform: uppercase;
  146. }
  147. </style>
  148. <script>
  149. var files = [];
  150. var sendingOffset = 0;
  151. var lastRequest = '';
  152. var dataView;
  153. var filesCount = 0;
  154. var currentUploadingFile = 0;
  155. var uploadOrder = [];
  156. var uploadingInProgress = 0;
  157. var fileUploadRequest;
  158. var chunkSize = 128;
  159. var totalUploaded = 0;
  160. var tpl = '<li class="working" id="file%filenum%"><div class="chart" id="graph%filenum%" data-percent="0"></div><p>%filename%<i>%filesize%</i></p><span id="fileStatus%filenum%" onclick="DeleteFiles(%filenum%);"></span></li>';
  161. document.addEventListener("DOMContentLoaded", function() {
  162. var dropbox;
  163. dropbox = document.getElementById("dropbox");
  164. dropbox.addEventListener("dragenter", dragenter, false);
  165. dropbox.addEventListener("dragover", dragover, false);
  166. dropbox.addEventListener("drop", drop, false);
  167. UpdateFileList();
  168. });
  169. function dragenter(e) {
  170. e.stopPropagation();
  171. e.preventDefault();
  172. }
  173. function dragover(e) {
  174. e.stopPropagation();
  175. e.preventDefault();
  176. }
  177. function drop(e) {
  178. e.stopPropagation();
  179. e.preventDefault();
  180. var dt = e.dataTransfer;
  181. handleFiles(dt.files);
  182. }
  183. function handleFiles(tfiles) {
  184. var filesCount = tfiles.length;
  185. files = tfiles;
  186. currentUploadingFile = 0;
  187. uploadOrder = [];
  188. sendingOffset = 0;
  189. lastRequest = '';
  190. document.getElementById('fileList').innerHTML = '';
  191. var fileNames = {};
  192. for (var i = 0; i < filesCount; i++) {
  193. fileNames[tfiles[i].name] = i;
  194. }
  195. Keys(fileNames).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) {
  196. var i = fileNames[item];
  197. var append = tpl.replace(/%filename%/g, tfiles[i].name);
  198. append = append.replace(/%filesize%/g, formatFileSize(tfiles[i].size));
  199. append = append.replace(/%filenum%/g, i);
  200. document.getElementById('fileList').insertAdjacentHTML('beforeend', append);
  201. UpdateGraph(0, i);
  202. uploadOrder.push(i);
  203. });
  204. }
  205. function DeleteFiles(filenum) {
  206. var elem = document.getElementById('file' + filenum.toString());
  207. elem.parentNode.removeChild(elem);
  208. if (uploadingInProgress) {
  209. if (parseInt(filenum) != uploadOrder[currentUploadingFile]) {
  210. for (var i = 0; i < uploadOrder.length; i++) {
  211. if (uploadOrder[i] == filenum) {
  212. delete uploadOrder[i];
  213. }
  214. }
  215. }
  216. else {
  217. uploadingInProgress = 0;
  218. RemoveFile(files[uploadOrder[currentUploadingFile]].name + '.dnl');
  219. for (var i = 0; i < uploadOrder.length; i++) {
  220. if (uploadOrder[i] == filenum) {
  221. delete uploadOrder[i];
  222. }
  223. }
  224. currentUploadingFile++;
  225. totalUploaded = 0;
  226. sendingOffset = 0;
  227. lastRequest = '';
  228. fileUploadRequest.abort();
  229. fileUploadRequest = 0;
  230. UploadFiles();
  231. }
  232. }
  233. else {
  234. for (var i = 0; i < uploadOrder.length; i++) {
  235. if (uploadOrder[i] == filenum) {
  236. delete uploadOrder[i];
  237. }
  238. }
  239. }
  240. }
  241. function UploadFiles() {
  242. if (uploadOrder[currentUploadingFile] === undefined) {
  243. uploadingInProgress = 0;
  244. if (currentUploadingFile < files.length - 1) {
  245. currentUploadingFile++;
  246. UploadFiles();
  247. }
  248. return;
  249. }
  250. var fileNum = uploadOrder[currentUploadingFile];
  251. var file = files[fileNum];
  252. var chunkLen = 0;
  253. var filedata = '';
  254. uploadingInProgress = 1;
  255. var fr = new FileReader();
  256. fr.onload = function() {
  257. dataView = null;
  258. dataView = new Uint8Array(fr.result);
  259. if (file.size <= chunkSize) {
  260. sendingOffset = 0;
  261. chunkLen = file.size;
  262. for (var i = 0; i < dataView.length; i++) {
  263. if (dataView[i] < 16) {
  264. filedata += '0';
  265. }
  266. filedata += dataView[i].toString(16).toUpperCase();
  267. }
  268. }
  269. else {
  270. if (dataView.length - sendingOffset > chunkSize) {
  271. chunkLen = chunkSize;
  272. }
  273. else {
  274. chunkLen = dataView.length - sendingOffset;
  275. }
  276. for (var i = sendingOffset; i < sendingOffset + chunkLen; i++) {
  277. if (dataView[i] < 16) {
  278. filedata += '0';
  279. }
  280. filedata += dataView[i].toString(16).toUpperCase();
  281. }
  282. }
  283. fileUploadRequest = new XMLHttpRequest();
  284. fileUploadRequest.onreadystatechange = function() {
  285. if (fileUploadRequest.readyState != 4) return;
  286. if (fileUploadRequest.status == 200) {
  287. if (chunkLen + sendingOffset < dataView.length) {
  288. totalUploaded += chunkSize;
  289. UpdateGraph(Math.round((totalUploaded / file.size) * 100), uploadOrder[currentUploadingFile]);
  290. sendingOffset += chunkSize;
  291. UploadFiles();
  292. }
  293. else {
  294. var statusElement = document.getElementById('fileStatus' + uploadOrder[currentUploadingFile]);
  295. sendingOffset = 0;
  296. UpdateGraph(100, uploadOrder[currentUploadingFile]);
  297. uploadingInProgress = 0;
  298. UpdateFileList();
  299. totalUploaded = 0;
  300. if (statusElement) {
  301. statusElement.style["background-position"] = "0 3px";
  302. }
  303. if (currentUploadingFile < files.length) {
  304. currentUploadingFile++;
  305. UploadFiles();
  306. }
  307. }
  308. }
  309. else {
  310. UploadFiles();
  311. }
  312. fileUploadRequest = 0;
  313. }
  314. lastRequest = 'upload.lua?cmd=upload&filename=' + file.name + '&filesize=' + file.size + '&len=' + chunkLen + '&offset=' + sendingOffset + '&data=' + filedata;
  315. fileUploadRequest.timeout = 5000;
  316. fileUploadRequest.open('GET', lastRequest, true);
  317. fileUploadRequest.send();
  318. };
  319. fr.readAsArrayBuffer(file);
  320. }
  321. function formatFileSize(bytes) {
  322. if (typeof bytes !== 'number') {
  323. return '';
  324. }
  325. if (bytes >= 1073741824) {
  326. return (bytes / 1073741824).toFixed(2) + ' GB';
  327. }
  328. if (bytes >= 1048576) {
  329. return (bytes / 1048576).toFixed(2) + ' MB';
  330. }
  331. return (bytes / 1024).toFixed(2) + ' KB';
  332. }
  333. function UpdateGraph(percent, id) {
  334. var el = document.getElementById('graph' + id); // get canvas
  335. if (!el) {
  336. return;
  337. }
  338. var options = {
  339. percent: el.getAttribute('data-percent') || 0,
  340. size: el.getAttribute('data-size') || 48,
  341. lineWidth: el.getAttribute('data-line') || 8,
  342. rotate: el.getAttribute('data-rotate') || 0
  343. }
  344. var canvas = document.createElement('canvas');
  345. if (typeof(G_vmlCanvasManager) !== 'undefined') {
  346. G_vmlCanvasManager.initElement(canvas);
  347. }
  348. var ctx = canvas.getContext('2d');
  349. canvas.width = canvas.height = options.size;
  350. el.appendChild(canvas);
  351. ctx.translate(options.size / 2, options.size / 2); // change center
  352. ctx.rotate((-1 / 2 + options.rotate / 180) * Math.PI); // rotate -90 deg
  353. var radius = (options.size - options.lineWidth) / 2;
  354. function drawCircle(color, lineWidth, percent) {
  355. if (percent) {
  356. percent = Math.min(Math.max(0, percent), 1);
  357. ctx.beginPath();
  358. ctx.arc(0, 0, radius, 0, Math.PI * 2 * percent, false);
  359. ctx.strokeStyle = color;
  360. ctx.lineCap = 'round'; // butt, round or square
  361. ctx.lineWidth = lineWidth
  362. ctx.stroke();
  363. }
  364. };
  365. options.percent = percent;
  366. drawCircle('#2e3134', options.lineWidth + 1, 100 / 100);
  367. drawCircle('#007a96', options.lineWidth, options.percent / 100);
  368. }
  369. function Keys(obj) {
  370. var keys = [];
  371. for(var key in obj){
  372. if(obj.hasOwnProperty(key)){
  373. keys.push(key);
  374. }
  375. }
  376. return keys;
  377. }
  378. function UpdateFileList() {
  379. var fileListRequest = new XMLHttpRequest();
  380. fileListRequest.onreadystatechange = function() {
  381. if (fileListRequest.readyState != 4) return;
  382. if (fileListRequest.status == 200) {
  383. var fileInfo = JSON.parse(fileListRequest.responseText);
  384. var fileList = fileInfo['files'];
  385. document.getElementById('fileInfo').innerHTML = '';
  386. var tpl = '<li class="working"><p style="left: 30px;">%filenamelink%<i>%filesize%</i></p><span id="fileStatus" onclick="RemoveFile(\'%filename%\');"></span></li>';
  387. var tplTotal = '<li class="working"><p style="left: 30px;">Used:<i>%used%</i></p></li><li class="working"><p style="left: 30px;">Free:<i>%free%</i></p></li><li class="working"><p style="left: 30px;">Total:<i>%total%</i></p></li>';
  388. var append, link;
  389. Keys(fileList).sort(function(a,b){var c=a.toLowerCase(),d=b.toLowerCase();return c<d?-1:c>d?1:0}).forEach(function(item) {
  390. if (!(item.match(/\.lc$/ig))) {
  391. link = item.replace(/\.gz$/g, '');
  392. append = tpl.replace(/%filenamelink%/g, '<a href="' + link + '" target="_blank">' + item + '</a>');
  393. }
  394. else {
  395. append = tpl.replace(/%filenamelink%/g, item);
  396. }
  397. append = append.replace(/%filename%/g, item);
  398. append = append.replace(/%filesize%/g, formatFileSize(parseInt(fileList[item])));
  399. document.getElementById('fileInfo').insertAdjacentHTML('beforeend', append);
  400. });
  401. append = tplTotal.replace(/%used%/g, formatFileSize(parseInt(fileInfo['used'])));
  402. append = append.replace(/%free%/g, formatFileSize(parseInt(fileInfo['free'])));
  403. append = append.replace(/%total%/g, formatFileSize(parseInt(fileInfo['total'])));
  404. document.getElementById('fileInfo').insertAdjacentHTML('beforeend', append);
  405. }
  406. else {
  407. }
  408. fileListRequest = null;
  409. }
  410. fileListRequest.open('GET', 'upload.lua?cmd=list', true);
  411. fileListRequest.send();
  412. }
  413. function RemoveFile(name) {
  414. var fileRemoveRequest = new XMLHttpRequest();
  415. fileRemoveRequest.onreadystatechange = function() {
  416. if (fileRemoveRequest.readyState != 4) return;
  417. if (fileRemoveRequest.status == 200) {
  418. UpdateFileList();
  419. }
  420. }
  421. fileRemoveRequest.open('GET', 'upload.lua?cmd=remove&filename=' + name, true);
  422. fileRemoveRequest.send();
  423. }
  424. </script>
  425. </head>
  426. <body>
  427. <div id="dropbox" class="dropBox">
  428. <div id="upload">
  429. <div id="drop">
  430. Drop Here
  431. <a onclick='document.getElementById("browseInput").click();'>Browse</a>
  432. <a onclick='UploadFiles();'>Upload</a>
  433. <form><input id="browseInput" type="file" name="upl" onclick="this.form.reset();" onchange="handleFiles(this.files);" multiple /></form>
  434. </div>
  435. <ul id="fileList">
  436. </ul>
  437. <div class="fileInfo">Files on device:</div>
  438. <ul id="fileInfo">
  439. </ul>
  440. </div>
  441. </div>
  442. </body>
  443. </html>