138 lines
4.2 KiB
JavaScript
Executable File
138 lines
4.2 KiB
JavaScript
Executable File
/*
|
|
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.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(" "));
|
|
|
|
var progressName = document.createElement("div");
|
|
progressName.className = "progressName";
|
|
var newName = file.name;
|
|
newName = newName.split('.');
|
|
newName = newName[0].slice(0,20);
|
|
newName = newName.concat('...');
|
|
progressName.appendChild(document.createTextNode(newName));
|
|
|
|
var progressSize = document.createElement("div");
|
|
progressSize.className = "progressSize";
|
|
var sizeKB = Math.round(file.size/1024*100)/100;
|
|
progressSize.appendChild(document.createTextNode('('+sizeKB+'KB)'));
|
|
|
|
var progressBar = document.createElement("div");
|
|
progressBar.className = "progressBarInProgress";
|
|
|
|
var progressStatus = document.createElement("div");
|
|
progressStatus.className = "progressBarStatus";
|
|
progressStatus.innerHTML = " ";
|
|
|
|
this.fileProgressElement.appendChild(progressName);
|
|
this.fileProgressElement.appendChild(progressSize);
|
|
this.fileProgressElement.appendChild(progressStatus);
|
|
this.fileProgressElement.appendChild(progressBar);
|
|
//this.fileProgressElement.appendChild(progressCancel);
|
|
|
|
this.fileProgressWrapper.appendChild(this.fileProgressElement);
|
|
|
|
document.getElementById(targetID).appendChild(this.fileProgressWrapper);
|
|
} else {
|
|
this.fileProgressElement = this.fileProgressWrapper.firstChild;
|
|
this.reset();
|
|
}
|
|
|
|
this.height = this.fileProgressWrapper.offsetHeight;
|
|
|
|
}
|
|
|
|
FileProgress.prototype.reset = function () {
|
|
|
|
this.fileProgressElement.childNodes[2].innerHTML = " ";
|
|
this.fileProgressElement.childNodes[3].style.width = "0%";
|
|
|
|
};
|
|
|
|
FileProgress.prototype.setProgress = function (percentage) {
|
|
|
|
this.fileProgressElement.childNodes[2].innerHTML = " - " + percentage + "%";
|
|
this.fileProgressElement.childNodes[3].innerHTML = "<img src='http://www.bemavocorp.com/admin/img/templates/progressbar-mid.gif' width='"+percentage+"%' height='4px'>";
|
|
this.fileProgressElement.childNodes[3].style.width = "100%";
|
|
|
|
};
|
|
|
|
FileProgress.prototype.setComplete = function () {
|
|
|
|
|
|
};
|
|
|
|
FileProgress.prototype.setError = function () {
|
|
|
|
};
|
|
|
|
FileProgress.prototype.setCancelled = function () {
|
|
|
|
$('.progressWrapper').fadeOut('fast');
|
|
|
|
};
|
|
|
|
FileProgress.prototype.setStatus = function (status) {
|
|
this.fileProgressElement.childNodes[2].innerHTML = " - " + status;
|
|
};
|
|
|
|
FileProgress.prototype.begin = function () {
|
|
|
|
//var wrapperId = this.fileProgressWrapper.id
|
|
//$('#'+wrapperId).fadeIn('fast');
|
|
|
|
};
|
|
|
|
FileProgress.prototype.end = function () {
|
|
|
|
var wrapperId = this.fileProgressWrapper.id
|
|
$('#'+wrapperId).fadeOut('fast');
|
|
|
|
};
|
|
|
|
// Show/Hide the cancel button
|
|
FileProgress.prototype.toggleCancel = function (show, swfUploadInstance) {
|
|
this.fileProgressElement.childNodes[0].style.visibility = show ? "visible" : "hidden";
|
|
if (swfUploadInstance) {
|
|
var fileID = this.fileProgressID;
|
|
this.fileProgressElement.childNodes[0].onclick = function () {
|
|
swfUploadInstance.cancelUpload(fileID);
|
|
return false;
|
|
};
|
|
}
|
|
};
|
|
|
|
FileProgress.prototype.appear = function () {
|
|
|
|
};
|
|
|
|
// Fades out and clips away the FileProgress box.
|
|
FileProgress.prototype.disappear = function () {
|
|
|
|
}; |