<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r" />
<title>Upload files with JavaScript/DHTML interface</title>
<meta CONTENT="flash upload, javascript file upload, upload multiple files" NAME="keywords" />
<style type="text/css">
.FilesContainer
{
width: 400px;
height: 350px;
overflow:auto;
border: 1px solid #cccccc;
}
.Unuploaded
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
height: 50px;
background-color: #FFFFCC;
border-bottom: 1px solid #000000;
}
.Uploaded
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
height: 50px;
border-bottom: 1px solid #000000;
background-color: #33FF66;
}
.Error
{
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
padding-right: 5px;
height: 50px;
border-bottom: 1px solid #000000;
background-color: #FF0000;
}
.Progress
{
display:none;
width: 300px;
font: 5px;
}
.Progress DIV
{
width: 0%;
background-color: #33FF33;
height: 5px;
}
</style>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function FlashUploader_onFilesAdded(filesId)
{
for(var i = 0; i < filesId.length; i++)
{
createFileNode(filesId[i]);
}
if(document.getElementById("UploadImmediately").checked)
{
uploadFiles();
}
}
function createFileNode(fileId)
{
var fileNode = document.getElementById("file_template").cloneNode(true);
var fileObj = FlashUploader.getFiles(fileId);
try
{
fileNode.setAttribute("id", fileId);
var nameElement = getNameTD(getChildByTagName(fileNode, "TABLE"));
nameElement.setAttribute("id", "name_" + fileId);
nameElement.innerHTML = fileObj.name + " (" + FlashUploader.getFormattedSize(fileObj.size) + ")";
getChildByTagName(fileNode, "DIV").setAttribute("id", "progress_" + fileId);
fileNode.style.display = "block";
document.getElementById("filesList").appendChild(fileNode);
}
catch(ex)
{
alert(ex.message);
}
}
// In FireFox childNodes array contain empty text nodes, therefore in our case Node.lastChild doesn't work properly.
// So we need to iterate through child nodes array and determine type of node.
function getChildByTagName(obj, tagName)
{
for(var i = 0; i < obj.childNodes.length; i++)
{
if(obj.childNodes[i].tagName == tagName)
return obj.childNodes[i];
}
}
function getNameTD(obj)
{
for(var i = 0; i < obj.childNodes.length; i++)
{
if(obj.childNodes[i].nodeType != obj.childNodes[i].TEXT_NODE)
{
if(obj.childNodes[i].tagName == "TD")
{
return obj.childNodes[i];
}
else if(obj.childNodes[i].hasChildNodes)
{
var tdObj = getNameTD(obj.childNodes[i]);
return tdObj;
}
}
}
}
function clearList()
{
var filesListNode = document.getElementById("filesList");
if(!filesListNode.hasChildNodes)
return;
if(FlashUploader.getProperty("queue.length") > 0)
FlashUploader.removeFiles();
var length = filesListNode.childNodes.length;
for(var i = length - 1; i >= 0; i--)
{
if(filesListNode.childNodes[i].tagName == "DIV")
filesListNode.removeChild(filesListNode.childNodes[i]);
}
}
function deleteFile(obj)
{
document.getElementById("filesList").removeChild(obj);
}
function uploadFiles()
{
document.getElementById("Upload").style.display = "none";
document.getElementById("Cancel").style.display = "block";
var filesListNode = document.getElementById("filesList");
for(var i = 0; i < filesListNode.childNodes.length; i++)
{
if(filesListNode.childNodes[i].tagName == "DIV")
filesListNode.childNodes[i].className = "Unuploaded";
}
FlashUploader.uploadFiles();
}
function cancelUpload()
{
FlashUploader.cancelUpload();
document.getElementById("Cancel").style.display = "none";
document.getElementById("Upload").style.display = "inline";
}
function FlashUploader_onFileLoadStart(fileObj)
{
// some useful action
}
function FlashUploader_onFileLoadEnd(fileObj)
{
document.getElementById(fileObj.id).className = "Uploaded";
var propressBar = document.getElementById("progress_" + fileObj.id).firstChild;
propressBar.style.width = "100%";
propressBar.style.backgroundColor = "#0000ff";
}
function FlashUploader_onUploadEnd()
{
if(FlashUploader.getProperty("queue.deleteUploadedFiles"))
{
clearList();
}
document.getElementById("Cancel").style.display = "none";
document.getElementById("Upload").style.display = "inline";
alert("Upload is completed!");
}
function FlashUploader_onUploadProgress(progress)
{
var progressElement = document.getElementById("progress_" + progress.currentFileId);
if(progressElement.style.display != "block")
progressElement.style.display = "block";
getChildByTagName(progressElement, "DIV").style.width = progress.percentsDone + "%";
}
function FlashUploader_onSystemError(msg)
{
alert(msg);
}
function FlashUploader_onUploadError(errorObject)
{
alert(errorObject.message + "\n" + "System message: " + errorObject.systemMessage);
document.getElementById(errorObject.file.id).className = "Error";
document.getElementById("progress_" + errorObject.file.id).style.display = "none";
FlashUploader.continueUpload(false);
}
function FlashUploader_onQueueError(msg)
{
alert(msg);
}
</script>
</head>
<body>
<p>
This example demonstrate how to use EAFlashUpload JavaScrip API to upload files on the server and display progress information.
</p>
<p>
Because of security restriction, in the Flash Player 10 open "browse dialog" via JavaScript is not possible without user interaction with flash object. Therefore EAFlashUpload has overlay mode: flash object is placed over hmtl object specified by "overlayModePlaceholder" property and handles mouse click events. This small trick allows you to create custom DHTML + JavaScript interface.
</p>
<div style="border: 1px solid #000000; padding: 10px;">
<b>Note:</b> Trial version has two limitiations: maximum files count is 10 and size of each file cannot be larger than 50 MB.
</div>
<noscript>
<h3>JavaScript should be enabled in your browser for successful work of this example.</h3>
</noscript>
<div id="EAFlashUpload_holder">
You need at least Adobe Flash Player 10 for successful work. Download the latest version from here:
<br />
<a href="http://www.adobe.com/support/flashplayer/downloads.html">Adobe Flash Player</a>
</div>
<br />
<input type="checkbox" name="UploadImmediately" id="UploadImmediately" />Upload files immediately after addition<br />
<br />
<div style="width: 400px; padding-bottom: 5px;">
<div style="float: right; padding-right: 10px;">
<a href="javascript:clearList();" >Clear list</a>
</div>
<div style="padding-left: 10px;">
<a href="" id="FlashOverlay">Select files</a>
</div>
</div>
<div class="FilesContainer" id="filesList">
</div>
<!-- Files list item template -->
<div id="file_template" class="Unuploaded" style="display:none;">
<table style="width: 100%; vertical-align: middle;"><tr>
<td id="name_"></td>
<td style="text-align:right;"><img onClick="deleteFile(this.parentNode.parentNode.parentNode.parentNode.parentNode);" style="border:none; cursor:pointer;" src="Images/deleteIcon.gif" /></td>
</tr></table>
<div id="progress_" class="Progress"><div></div></div>
</div>
<!-- Files list item template -->
<a id="Upload" href="javascript:uploadFiles();" >Upload files</a>
<a id="Cancel" style="display:none;" href="javascript:cancelUpload();" >Cancel upload</a>
<br />
<hr />
<a target="_blank" href="http://www.easyalgo.com/quickstart/util/srcview.aspx?path=/Examples/EAFlashUpload/JavaScriptInterface.src">View source code</a>
<script type="text/javascript">
var params = {
BGcolor: "#ffffff",
wmode: "transparent" // Required parameter for overlay mode
};
var attributes = {
data: "EAFUpload.swf",
id: "FlashUploader",
name: "FlashUploader",
style: "position:absolute"
};
var flashvars = new Object();
flashvars["uploader.uploadUrl"] = "uploadfiles.aspx"; // you should specify an appropriate URL of script that will receive files.
flashvars["overlayModePlaceholder"] = "FlashOverlay"; // Required property for overlay mode
flashvars["queue.filesCountLimit"] = "10";
flashvars["queue.fileSizeLimit"] = "10485760" // Value in bytes. 10 MB.
swfobject.embedSWF("EAFUpload.swf", "EAFlashUpload_holder", "100", "100", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>
</body>
</html>