fileprogress.js
上传用户:itkeji
上传日期:2017-12-04
资源大小:6184k
文件大小:7k
源码类别:

Jsp/Servlet

开发平台:

Java

  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. var progressText = document.createElement("div");
  27. progressText.className = "progressName";
  28. progressText.appendChild(document.createTextNode(file.name));
  29. var progressBar = document.createElement("div");
  30. progressBar.className = "progressBarInProgress";
  31. var progressStatus = document.createElement("div");
  32. progressStatus.className = "progressBarStatus";
  33. progressStatus.innerHTML = " ";
  34. this.fileProgressElement.appendChild(progressCancel);
  35. this.fileProgressElement.appendChild(progressText);
  36. this.fileProgressElement.appendChild(progressStatus);
  37. this.fileProgressElement.appendChild(progressBar);
  38. this.fileProgressWrapper.appendChild(this.fileProgressElement);
  39. document.getElementById(targetID).appendChild(this.fileProgressWrapper);
  40. } else {
  41. this.fileProgressElement = this.fileProgressWrapper.firstChild;
  42. this.reset();
  43. }
  44. this.height = this.fileProgressWrapper.offsetHeight;
  45. this.setTimer(null);
  46. }
  47. FileProgress.prototype.setTimer = function (timer) {
  48. this.fileProgressElement["FP_TIMER"] = timer;
  49. };
  50. FileProgress.prototype.getTimer = function (timer) {
  51. return this.fileProgressElement["FP_TIMER"] || null;
  52. };
  53. FileProgress.prototype.reset = function () {
  54. this.fileProgressElement.className = "progressContainer";
  55. this.fileProgressElement.childNodes[2].innerHTML = " ";
  56. this.fileProgressElement.childNodes[2].className = "progressBarStatus";
  57. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  58. this.fileProgressElement.childNodes[3].style.width = "0%";
  59. this.appear();
  60. };
  61. FileProgress.prototype.setProgress = function (percentage) {
  62. this.fileProgressElement.className = "progressContainer green";
  63. this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
  64. this.fileProgressElement.childNodes[3].style.width = percentage + "%";
  65. this.appear();
  66. };
  67. FileProgress.prototype.setComplete = function () {
  68. this.fileProgressElement.className = "progressContainer blue";
  69. this.fileProgressElement.childNodes[3].className = "progressBarComplete";
  70. this.fileProgressElement.childNodes[3].style.width = "";
  71. var oSelf = this;
  72. this.setTimer(setTimeout(function () {
  73. oSelf.disappear();
  74. }, 10000));
  75. };
  76. FileProgress.prototype.setError = function () {
  77. this.fileProgressElement.className = "progressContainer red";
  78. this.fileProgressElement.childNodes[3].className = "progressBarError";
  79. this.fileProgressElement.childNodes[3].style.width = "";
  80. var oSelf = this;
  81. this.setTimer(setTimeout(function () {
  82. oSelf.disappear();
  83. }, 5000));
  84. };
  85. FileProgress.prototype.setCancelled = function () {
  86. this.fileProgressElement.className = "progressContainer";
  87. this.fileProgressElement.childNodes[3].className = "progressBarError";
  88. this.fileProgressElement.childNodes[3].style.width = "";
  89. var oSelf = this;
  90. this.setTimer(setTimeout(function () {
  91. oSelf.disappear();
  92. }, 2000));
  93. };
  94. FileProgress.prototype.setStatus = function (status) {
  95. this.fileProgressElement.childNodes[2].innerHTML = status;
  96. };
  97. // Show/Hide the cancel button
  98. FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
  99. this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
  100. if (swfUploadInstance) {
  101. var fileID = this.fileProgressID;
  102. this.fileProgressElement.childNodes[0].onclick = function () {
  103. swfUploadInstance.cancelUpload(fileID);
  104. return false;
  105. };
  106. }
  107. };
  108. FileProgress.prototype.appear = function () {
  109. if (this.getTimer() !== null) {
  110. clearTimeout(this.getTimer());
  111. this.setTimer(null);
  112. }
  113. if (this.fileProgressWrapper.filters) {
  114. try {
  115. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;
  116. } catch (e) {
  117. // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
  118. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  119. }
  120. } else {
  121. this.fileProgressWrapper.style.opacity = 1;
  122. }
  123. this.fileProgressWrapper.style.height = "";
  124. this.height = this.fileProgressWrapper.offsetHeight;
  125. this.opacity = 100;
  126. this.fileProgressWrapper.style.display = "";
  127. };
  128. // Fades out and clips away the FileProgress box.
  129. FileProgress.prototype.disappear = function () {
  130. var reduceOpacityBy = 15;
  131. var reduceHeightBy = 4;
  132. var rate = 30; // 15 fps
  133. if (this.opacity > 0) {
  134. this.opacity -= reduceOpacityBy;
  135. if (this.opacity < 0) {
  136. this.opacity = 0;
  137. }
  138. if (this.fileProgressWrapper.filters) {
  139. try {
  140. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
  141. } catch (e) {
  142. // If it is not set initially, the browser will throw an error.  This will set it if it is not set yet.
  143. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
  144. }
  145. } else {
  146. this.fileProgressWrapper.style.opacity = this.opacity / 100;
  147. }
  148. }
  149. if (this.height > 0) {
  150. this.height -= reduceHeightBy;
  151. if (this.height < 0) {
  152. this.height = 0;
  153. }
  154. this.fileProgressWrapper.style.height = this.height + "px";
  155. }
  156. if (this.height > 0 || this.opacity > 0) {
  157. var oSelf = this;
  158. this.setTimer(setTimeout(function () {
  159. oSelf.disappear();
  160. }, rate));
  161. } else {
  162. this.fileProgressWrapper.style.display = "none";
  163. this.setTimer(null);
  164. }
  165. };