123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215 |
- /*
- A simple class for displaying file information and progress
- Note: This is a demonstration only and not part of SWFUpload.
- Note: Some have had problems adapting this class in IE7. It may not be suitable for your application.
- */
- // Constructor
- // file is a SWFUpload file object
- // targetID is the HTML element id attribute that the FileProgress HTML structure will be added to.
- // Instantiating a new FileProgress object with an existing file will reuse/update the existing DOM elements
- function FileProgress(file, targetID) {
- this.fileProgressID = file.id;
- this.opacity = 100;
- this.height = 0;
-
- this.fileProgressWrapper = document.getElementById(this.fileProgressID);
- if (!this.fileProgressWrapper) {
- this.fileProgressWrapper = document.createElement("div");
- this.fileProgressWrapper.className = "progressWrapper";
- this.fileProgressWrapper.id = this.fileProgressID;
- this.fileProgressElement = document.createElement("div");
- this.fileProgressElement.className = "progressContainer";
- var progressCancel = document.createElement("a");
- progressCancel.className = "progressCancel";
- progressCancel.href = "#";
- progressCancel.style.visibility = "hidden";
- progressCancel.appendChild(document.createTextNode(" "));
- //by ue
- progressCancel.onclick = function(){
- alert(1);
- }
- var progressText = document.createElement("div");
- progressText.className = "progressName";
- progressText.appendChild(document.createTextNode(file.name));
- var progressBar = document.createElement("div");
- progressBar.className = "progressBarInProgress";
- var progressStatus = document.createElement("div");
- progressStatus.className = "progressBarStatus";
- progressStatus.innerHTML = " ";
- this.fileProgressElement.appendChild(progressCancel);
- this.fileProgressElement.appendChild(progressText);
- this.fileProgressElement.appendChild(progressStatus);
- this.fileProgressElement.appendChild(progressBar);
- this.fileProgressWrapper.appendChild(this.fileProgressElement);
- document.getElementById(targetID).appendChild(this.fileProgressWrapper);
- } else {
- this.fileProgressElement = this.fileProgressWrapper.firstChild;
- this.reset();
- }
- this.height = this.fileProgressWrapper.offsetHeight;
- this.setTimer(null);
- }
- FileProgress.prototype.setTimer = function (timer) {
- this.fileProgressElement["FP_TIMER"] = timer;
- };
- FileProgress.prototype.getTimer = function (timer) {
- return this.fileProgressElement["FP_TIMER"] || null;
- };
- FileProgress.prototype.reset = function () {
- this.fileProgressElement.className = "progressContainer";
- this.fileProgressElement.childNodes[2].innerHTML = " ";
- this.fileProgressElement.childNodes[2].className = "progressBarStatus";
-
- this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
- this.fileProgressElement.childNodes[3].style.width = "0%";
-
- this.appear();
- };
- FileProgress.prototype.setProgress = function (percentage) {
- this.fileProgressElement.className = "progressContainer green";
- this.fileProgressElement.childNodes[3].className = "progressBarInProgress";
- this.fileProgressElement.childNodes[3].style.width = percentage + "%";
- this.appear();
- };
- FileProgress.prototype.setComplete = function () {
- this.fileProgressElement.className = "progressContainer blue";
- this.fileProgressElement.childNodes[3].className = "progressBarComplete";
- this.fileProgressElement.childNodes[3].style.width = "";
- var oSelf = this;
- this.setTimer(setTimeout(function () {
- //oSelf.disappear(); //隐藏已完成列表
- }, 10000));
- };
- FileProgress.prototype.setError = function () {
- this.fileProgressElement.className = "progressContainer red";
- this.fileProgressElement.childNodes[3].className = "progressBarError";
- this.fileProgressElement.childNodes[3].style.width = "";
- //edir by ue
- var oSelf = this;
- this.setTimer(setTimeout(function () {
- //oSelf.disappear();
- }, 3000));
- };
- FileProgress.prototype.setCancelled = function () {
- this.fileProgressElement.className = "progressContainer";
- this.fileProgressElement.childNodes[3].className = "progressBarError";
- this.fileProgressElement.childNodes[3].style.width = "";
- var oSelf = this;
- this.setTimer(setTimeout(function () {
- oSelf.disappear();
- }, 1000));
- };
- FileProgress.prototype.setStatus = function (status) {
- this.fileProgressElement.childNodes[2].innerHTML = status;
- };
- // Show/Hide the cancel button
- FileProgress.prototype.toggleCancel = function (show, swfUploadInstance,message) {
- //edit by ue
- var cancelBtn = this.fileProgressElement.childNodes[0];
- cancelBtn.style.visibility = show ? "visible" : "hidden";
- cancelBtn.title = message?message:"取消上传";
- if (swfUploadInstance) {
- //edit by ue
- var me = this;
- var fileID = me.fileProgressID,
- e = me.fileProgressElement;
- e.children[0].onclick = function () {
- me.disappear();
- swfUploadInstance.cancelUpload(fileID);
- return false;
- };
- }
- };
- FileProgress.prototype.appear = function () {
- if (this.getTimer() !== null) {
- clearTimeout(this.getTimer());
- this.setTimer(null);
- }
-
- if (this.fileProgressWrapper.filters) {
- try {
- this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = 100;
- } catch (e) {
- // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
- this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=100)";
- }
- } else {
- this.fileProgressWrapper.style.opacity = 1;
- }
-
- this.fileProgressWrapper.style.height = "";
-
- this.height = this.fileProgressWrapper.offsetHeight;
- this.opacity = 100;
- this.fileProgressWrapper.style.display = "";
-
- };
- // Fades out and clips away the FileProgress box.
- FileProgress.prototype.disappear = function () {
- var reduceOpacityBy = 15;
- var reduceHeightBy = 4;
- var rate = 30; // 15 fps
- if (this.opacity > 0) {
- this.opacity -= reduceOpacityBy;
- if (this.opacity < 0) {
- this.opacity = 0;
- }
- if (this.fileProgressWrapper.filters) {
- try {
- this.fileProgressWrapper.filters.item("DXImageTransform.Microsoft.Alpha").opacity = this.opacity;
- } catch (e) {
- // If it is not set initially, the browser will throw an error. This will set it if it is not set yet.
- this.fileProgressWrapper.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + this.opacity + ")";
- }
- } else {
- this.fileProgressWrapper.style.opacity = this.opacity / 100;
- }
- }
- if (this.height > 0) {
- this.height -= reduceHeightBy;
- if (this.height < 0) {
- this.height = 0;
- }
- this.fileProgressWrapper.style.height = this.height + "px";
- }
- if (this.height > 0 || this.opacity > 0) {
- var oSelf = this;
- this.setTimer(setTimeout(function () {
- oSelf.disappear();
- }, rate));
- } else {
- this.fileProgressWrapper.style.display = "none";
- this.setTimer(null);
- }
- };
|