fileprogress.js 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. function FileProgress(file, targetID) {
  2. //this.fileProgressID = file.id;
  3. this.fileProgressID = 0;
  4. this.opacity = 100;
  5. this.height = 0;
  6. this.fileProgressWrapper = document.getElementById(this.fileProgressID);
  7. if (!this.fileProgressWrapper) {
  8. this.fileProgressWrapper = document.createElement("div");
  9. this.fileProgressWrapper.className = "progressWrapper";
  10. this.fileProgressWrapper.id = this.fileProgressID;
  11. this.fileProgressElement = document.createElement("div");
  12. this.fileProgressElement.className = "progressContainer";
  13. var progressCancel = document.createElement("a");
  14. progressCancel.className = "progressCancel";
  15. progressCancel.href = "#";
  16. progressCancel.style.visibility = "hidden";
  17. progressCancel.appendChild(document.createTextNode(" "));
  18. var progressText = document.createElement("div");
  19. progressText.className = "progressName";
  20. //
  21. //progressText.innerHTML = '<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>';
  22. //progressText.appendChild(document.createTextNode('<tr><td><a href="#" target="_blank">发票1.jpg</a></td><td>20kb</td><td><a href="">删除</a></td></tr>'));
  23. //progressText.appendChild(document.createTextNode(file.name));
  24. //td1.appendChild(document.createTextNode());
  25. // var tr = document.createElement("tr");
  26. // var td1 = document.createElement("td");
  27. // td1.innerHTML = '<a href="#" target="_blank">'+file.name+'</a>';
  28. // var td2 = document.createElement("td");
  29. // td2.innerHTML = toDecimal2(file.size/1024)+'kb';
  30. // var td3 = document.createElement("td");
  31. // td3.innerHTML = '<a href="#" target="_blank">删除</a>';
  32. // tr.appendChild(td1);
  33. // tr.appendChild(td2);
  34. // tr.appendChild(td3);
  35. //
  36. // var kt=document.getElementById('KT');
  37. // kt.appendChild(tr);
  38. var progressBar = document.createElement("div");
  39. progressBar.className = "progressBarInProgress";
  40. var progressStatus = document.createElement("div");
  41. progressStatus.className = "progressBarStatus";
  42. progressStatus.innerHTML = "";
  43. this.fileProgressElement.appendChild(progressCancel);
  44. this.fileProgressElement.appendChild(progressText);
  45. this.fileProgressElement.appendChild(progressStatus);
  46. this.fileProgressElement.appendChild(progressBar);
  47. this.fileProgressWrapper.appendChild(this.fileProgressElement);
  48. document.getElementById(targetID).appendChild(this.fileProgressWrapper);
  49. } else {
  50. this.fileProgressElement = this.fileProgressWrapper.firstChild;
  51. }
  52. this.height = this.fileProgressWrapper.offsetHeight;
  53. }
  54. FileProgress.prototype.setProgress = function (percentage) {
  55. this.fileProgressElement.className = "progressContainer green";
  56. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  57. this.fileProgressElement.childNodes[3].style.width = percentage + "%";
  58. };
  59. FileProgress.prototype.setComplete = function () {
  60. this.fileProgressElement.className = "progressContainer blue";
  61. this.fileProgressElement.childNodes[3].className = "progressBarComplete";
  62. this.fileProgressElement.childNodes[3].style.width = "";
  63. var oSelf = this;
  64. // setTimeout(function () {
  65. // oSelf.disappear();
  66. // }, 10000);
  67. };
  68. FileProgress.prototype.setError = function () {
  69. this.fileProgressElement.className = "progressContainer red";
  70. this.fileProgressElement.childNodes[3].className = "progressBarError";
  71. this.fileProgressElement.childNodes[3].style.width = "";
  72. var oSelf = this;
  73. setTimeout(function () {
  74. oSelf.disappear();
  75. }, 5000);
  76. };
  77. FileProgress.prototype.setCancelled = function () {
  78. this.fileProgressElement.className = "progressContainer";
  79. this.fileProgressElement.childNodes[3].className = "progressBarError";
  80. this.fileProgressElement.childNodes[3].style.width = "";
  81. var oSelf = this;
  82. setTimeout(function () {
  83. oSelf.disappear();
  84. }, 2000);
  85. };
  86. FileProgress.prototype.setStatus = function (status) {
  87. this.fileProgressElement.childNodes[2].innerHTML = status;
  88. };
  89. // Show/Hide the cancel button
  90. FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
  91. this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
  92. if (swfUploadInstance) {
  93. var fileID = this.fileProgressID;
  94. this.fileProgressElement.childNodes[0].onclick = function () {
  95. swfUploadInstance.cancelUpload(fileID);
  96. return false;
  97. };
  98. }
  99. };
  100. // Fades out and clips away the FileProgress box.
  101. FileProgress.prototype.disappear1 = function () {
  102. var reduceOpacityBy = 15;
  103. var reduceHeightBy = 4;
  104. var rate = 30; // 15 fps
  105. if (this.opacity > 0) {
  106. this.opacity -= reduceOpacityBy;
  107. if (this.opacity < 0) {
  108. this.opacity = 0;
  109. }
  110. if (this.fileProgressWrapper.filters) {
  111. try {
  112. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
  113. } catch (e) {
  114. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  115. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
  116. }
  117. } else {
  118. this.fileProgressWrapper.style.opacity = this.opacity / 100;
  119. }
  120. }
  121. if (this.height > 0) {
  122. this.height -= reduceHeightBy;
  123. if (this.height < 0) {
  124. this.height = 0;
  125. }
  126. this.fileProgressWrapper.style.height = this.height + "px";
  127. }
  128. if (this.height > 0 || this.opacity > 0) {
  129. var oSelf = this;
  130. setTimeout(function () {
  131. oSelf.disappear();
  132. }, rate);
  133. } else {
  134. this.fileProgressWrapper.style.display = '';//"none";
  135. }
  136. };
  137. function toDecimal2(x) {
  138. var f = parseFloat(x);
  139. if (isNaN(f)) {
  140. return false;
  141. }
  142. var f = Math.round(x*100)/100;
  143. var s = f.toString();
  144. var rs = s.indexOf('.');
  145. if (rs < 0) {
  146. rs = s.length;
  147. s += '.';
  148. }
  149. while (s.length <= rs + 2) {
  150. s += '0';
  151. }
  152. return s;
  153. }