fileprogress.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215
  1. /*
  2. A simple class for displaying file information and progress
  3. Note: This is a demonstration only and not part of SWFUpload.
  4. Note: Some have had problems adapting this class in IE7. It may not be suitable for your application.
  5. */
  6. // Constructor
  7. // file is a SWFUpload file object
  8. // targetID is the HTML element id attribute that the FileProgress HTML structure will be added to.
  9. // Instantiating a new FileProgress object with an existing file will reuse/update the existing DOM elements
  10. function FileProgress(file, targetID) {
  11. this.fileProgressID = file.id;
  12. this.opacity = 100;
  13. this.height = 0;
  14. this.fileProgressWrapper = document.getElementById(this.fileProgressID);
  15. if (!this.fileProgressWrapper) {
  16. this.fileProgressWrapper = document.createElement("div");
  17. this.fileProgressWrapper.className = "progressWrapper";
  18. this.fileProgressWrapper.id = this.fileProgressID;
  19. this.fileProgressElement = document.createElement("div");
  20. this.fileProgressElement.className = "progressContainer";
  21. var progressCancel = document.createElement("a");
  22. progressCancel.className = "progressCancel";
  23. progressCancel.href = "#";
  24. progressCancel.style.visibility = "hidden";
  25. progressCancel.appendChild(document.createTextNode(" "));
  26. //by ue
  27. progressCancel.onclick = function(){
  28. alert(1);
  29. }
  30. var progressText = document.createElement("div");
  31. progressText.className = "progressName";
  32. progressText.appendChild(document.createTextNode(file.name));
  33. var progressBar = document.createElement("div");
  34. progressBar.className = "progressBarInProgress";
  35. var progressStatus = document.createElement("div");
  36. progressStatus.className = "progressBarStatus";
  37. progressStatus.innerHTML = " ";
  38. this.fileProgressElement.appendChild(progressCancel);
  39. this.fileProgressElement.appendChild(progressText);
  40. this.fileProgressElement.appendChild(progressStatus);
  41. this.fileProgressElement.appendChild(progressBar);
  42. this.fileProgressWrapper.appendChild(this.fileProgressElement);
  43. document.getElementById(targetID).appendChild(this.fileProgressWrapper);
  44. } else {
  45. this.fileProgressElement = this.fileProgressWrapper.firstChild;
  46. this.reset();
  47. }
  48. this.height = this.fileProgressWrapper.offsetHeight;
  49. this.setTimer(null);
  50. }
  51. FileProgress.prototype.setTimer = function (timer) {
  52. this.fileProgressElement["FP_TIMER"] = timer;
  53. };
  54. FileProgress.prototype.getTimer = function (timer) {
  55. return this.fileProgressElement["FP_TIMER"] || null;
  56. };
  57. FileProgress.prototype.reset = function () {
  58. this.fileProgressElement.className = "progressContainer";
  59. this.fileProgressElement.childNodes[2].innerHTML = " ";
  60. this.fileProgressElement.childNodes[2].className = "progressBarStatus";
  61. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  62. this.fileProgressElement.childNodes[3].style.width = "0%";
  63. this.appear();
  64. };
  65. FileProgress.prototype.setProgress = function (percentage) {
  66. this.fileProgressElement.className = "progressContainer green";
  67. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  68. this.fileProgressElement.childNodes[3].style.width = percentage + "%";
  69. this.appear();
  70. };
  71. FileProgress.prototype.setComplete = function () {
  72. this.fileProgressElement.className = "progressContainer blue";
  73. this.fileProgressElement.childNodes[3].className = "progressBarComplete";
  74. this.fileProgressElement.childNodes[3].style.width = "";
  75. var oSelf = this;
  76. this.setTimer(setTimeout(function () {
  77. //oSelf.disappear(); //隐藏已完成列表
  78. }, 10000));
  79. };
  80. FileProgress.prototype.setError = function () {
  81. this.fileProgressElement.className = "progressContainer red";
  82. this.fileProgressElement.childNodes[3].className = "progressBarError";
  83. this.fileProgressElement.childNodes[3].style.width = "";
  84. //edir by ue
  85. var oSelf = this;
  86. this.setTimer(setTimeout(function () {
  87. //oSelf.disappear();
  88. }, 3000));
  89. };
  90. FileProgress.prototype.setCancelled = function () {
  91. this.fileProgressElement.className = "progressContainer";
  92. this.fileProgressElement.childNodes[3].className = "progressBarError";
  93. this.fileProgressElement.childNodes[3].style.width = "";
  94. var oSelf = this;
  95. this.setTimer(setTimeout(function () {
  96. oSelf.disappear();
  97. }, 1000));
  98. };
  99. FileProgress.prototype.setStatus = function (status) {
  100. this.fileProgressElement.childNodes[2].innerHTML = status;
  101. };
  102. // Show/Hide the cancel button
  103. FileProgress.prototype.toggleCancel = function (show, swfUploadInstance,message) {
  104. //edit by ue
  105. var cancelBtn = this.fileProgressElement.childNodes[0];
  106. cancelBtn.style.visibility = show ? "visible" : "hidden";
  107. cancelBtn.title = message?message:"取消上传";
  108. if (swfUploadInstance) {
  109. //edit by ue
  110. var me = this;
  111. var fileID = me.fileProgressID,
  112. e = me.fileProgressElement;
  113. e.children[0].onclick = function () {
  114. me.disappear();
  115. swfUploadInstance.cancelUpload(fileID);
  116. return false;
  117. };
  118. }
  119. };
  120. FileProgress.prototype.appear = function () {
  121. if (this.getTimer() !== null) {
  122. clearTimeout(this.getTimer());
  123. this.setTimer(null);
  124. }
  125. if (this.fileProgressWrapper.filters) {
  126. try {
  127. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;
  128. } catch (e) {
  129. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  130. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  131. }
  132. } else {
  133. this.fileProgressWrapper.style.opacity = 1;
  134. }
  135. this.fileProgressWrapper.style.height = "";
  136. this.height = this.fileProgressWrapper.offsetHeight;
  137. this.opacity = 100;
  138. this.fileProgressWrapper.style.display = "";
  139. };
  140. // Fades out and clips away the FileProgress box.
  141. FileProgress.prototype.disappear = function () {
  142. var reduceOpacityBy = 15;
  143. var reduceHeightBy = 4;
  144. var rate = 30; // 15 fps
  145. if (this.opacity > 0) {
  146. this.opacity -= reduceOpacityBy;
  147. if (this.opacity < 0) {
  148. this.opacity = 0;
  149. }
  150. if (this.fileProgressWrapper.filters) {
  151. try {
  152. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
  153. } catch (e) {
  154. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  155. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
  156. }
  157. } else {
  158. this.fileProgressWrapper.style.opacity = this.opacity / 100;
  159. }
  160. }
  161. if (this.height > 0) {
  162. this.height -= reduceHeightBy;
  163. if (this.height < 0) {
  164. this.height = 0;
  165. }
  166. this.fileProgressWrapper.style.height = this.height + "px";
  167. }
  168. if (this.height > 0 || this.opacity > 0) {
  169. var oSelf = this;
  170. this.setTimer(setTimeout(function () {
  171. oSelf.disappear();
  172. }, rate));
  173. } else {
  174. this.fileProgressWrapper.style.display = "none";
  175. this.setTimer(null);
  176. }
  177. };