fileprogress.js 7.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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 = "javascript:void(0)";
  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. //swfUploadInstance.callFlash("SetButtonDisabled", [false]);
  105. var val=document.getElementById('isupload').value;
  106. var videoObj=document.getElementById('videoList');
  107. var videoList=videoObj.value;
  108. var key=fileID.split("_");
  109. var videoList=videoList.split("|");
  110. if("uploading"!=val){
  111. if(confirm("您是否要删除视频?")){
  112. videoList.splice(key['2'],1,'');
  113. var val=videoList.join("|");
  114. videoObj.value=val;
  115. document.getElementById(fileID).style.display="none";
  116. }
  117. }else{
  118. videoList.splice(key['2'],0,'');
  119. var val=videoList.join("|");
  120. videoObj.value=val;
  121. document.getElementById('isupload').value="";
  122. }
  123. return false;
  124. };
  125. }
  126. //
  127. };
  128. FileProgress.prototype.appear = function () {
  129. if (this.getTimer() !== null) {
  130. clearTimeout(this.getTimer());
  131. this.setTimer(null);
  132. }
  133. if (this.fileProgressWrapper.filters) {
  134. try {
  135. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;
  136. } catch (e) {
  137. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  138. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
  139. }
  140. } else {
  141. this.fileProgressWrapper.style.opacity = 1;
  142. }
  143. this.fileProgressWrapper.style.height = "";
  144. this.height = this.fileProgressWrapper.offsetHeight;
  145. this.opacity = 100;
  146. this.fileProgressWrapper.style.display = "";
  147. };
  148. // Fades out and clips away the FileProgress box.
  149. FileProgress.prototype.disappear = function () {
  150. var reduceOpacityBy = 15;
  151. var reduceHeightBy = 4;
  152. var rate = 30; // 15 fps
  153. if (this.opacity > 0) {
  154. this.opacity -= reduceOpacityBy;
  155. if (this.opacity < 0) {
  156. this.opacity = 0;
  157. }
  158. if (this.fileProgressWrapper.filters) {
  159. try {
  160. this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
  161. } catch (e) {
  162. // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
  163. this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
  164. }
  165. } else {
  166. this.fileProgressWrapper.style.opacity = this.opacity / 100;
  167. }
  168. }
  169. if (this.height > 0) {
  170. this.height -= reduceHeightBy;
  171. if (this.height < 0) {
  172. this.height = 0;
  173. }
  174. this.fileProgressWrapper.style.height = this.height + "px";
  175. }
  176. if (this.height > 0 || this.opacity > 0) {
  177. var oSelf = this;
  178. this.setTimer(setTimeout(function () {
  179. oSelf.disappear();
  180. }, rate));
  181. } else {
  182. this.fileProgressWrapper.style.display = "none";
  183. this.setTimer(null);
  184. }
  185. };