<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Java Script upload example</title>
<link rel="stylesheet" href="styles.css">
<style type="text/css">
select {
border-right: 1px solid #b8b8b8;
border-top: 1px solid #b8b8b8;
border-left: 1px solid #b8b8b8;
border-bottom: 1px solid #b8b8b8;
}
</style>
</head>
<body>
Sample: <b>javascriptupload.html</b> <a href="javascript:location.reload(true);"><img border="0" src="images/refresh.png" width="16" height="16"> Refresh frame</a> <a target="_parent" href="index.htm"><img border="0" src="images/home.png" width="16" height="16"> Examples home</a><br/><br/>
<!-- text below wil be shown if JavaScript disabled at browser -->
<span id="noscriptdiv" style="border:1px solid #FF0000;display:block;padding:5px;text-align:left; background: #FDF2F2;color:#000;">Active Scripting (JavaScript) should be enabled in your
browser for this application to function properly!</span>
<script type="text/javascript">
document.getElementById('noscriptdiv').style.visibility = 'hidden';
</script>
<p>The example shows the possibility to change JavaPowUpload interface on user’s own HTML interface with the help of Javascript + HTML . It example shows a dialogue window to browse files. It is possible to drag-n-drop the files to a region on a web page.
</p>
Drop files and folders to the region below or browse files by clicking buttons!<br>
<br>
<applet
code="com.elementit.JavaPowUpload.Manager"
archive="lib/JavaPowUpload.jar, lib/skinlf.jar,
lib/commons-logging-1.1.jar,
lib/commons-httpclient-3.1-rc1.jar,
lib/commons-codec-1.3.jar"
width="200"
height="100"
name="JavaPowUpload"
id="JavaPowUpload"
mayscript="true"
alt="JavaPowUpload by www.element-it.com"
VIEWASTEXT>
< color= "#0000FF">param name="Common.SerialNumber" value="">
< color= "#0000FF">param name="progressbar" value="false">
< color= "#0000FF">param name="boxmessage" value="Loading JavaPowUpload Applet ...">
<!--Enable upload mode -->
< color= "#0000FF">param name="Common.UploadMode" value="true">
<!--Enable JavaPowUpload events and functions to use in JavaScript -->
< color= "#0000FF">param name="Common.UseLiveConnect" value="true">
<!--Hide user interface -->
< color= "#0000FF">param name="Common.RunHidden" value="true">
<!--Set url to file processing script -->
< color= "#0000FF">param name="Upload.UploadUrl" value="FileProcessingScripts/PHP/uploadfiles.php">
< color= "#0000FF">param name="Common.SkinLF.ThemepackURL" value="lib/themepack.zip">
<!-- This text will be shown if applet not working or Java not installed-->
<span style="border:1px solid #FF0000;display:block;padding:5px;margin-top:10px;margin-bottom:10px;text-align:left; background: #FDF2F2;color:#000;">You should <b>enable applets</b> running at browser and to have the <b>Java</b> (JRE) version >= 1.5.<br />If applet is not displaying properly, please check <a target="_blank" href="http://java.com/en/download/help/testvm.xml" title="Check Java applets">additional configurations</a></span>
</applet>
<!-- Java Script code -->
<script type="text/javascript">
var uploadedfilescount = 0;
var JavaPowUpload;
window.onload = function() {
InitJavaObj();
}
function InitJavaObj()
{
JavaPowUpload = document.getElementById("JavaPowUpload");
}
function browsefiles()
{
JavaPowUpload.clickBrowse();
}
//Clear HTML list
function clearListBox(lstBox)
{
while (lstBox.length > 0)
{
lstBox.remove(0);
}
}
//Update HTML progress bar state
function updateProgressBar(percentDone)
{
var rowProgress = document.getElementById("rowProgress");
if(percentDone>=1)
rowProgress.width = percentDone + "%";
else
rowProgress.width = "1"; //0% width not shown correctly by some browsers
}
function StartUpload()
{
updateProgressBar(0);
uploadedfilescount = 0;
document.getElementById("lable").innerHTML = "";
JavaPowUpload.clickDownload();
}
function StopUpload()
{
JavaPowUpload.clickStop();
}
function RemoveAll()
{
JavaPowUpload.clearTree();
var fileslist = document.getElementById("fileslist");
clearListBox(fileslist);
UpdateTotalFilesLable();
}
function RemoveSelected()
{
var fileslist = document.getElementById("fileslist");
for(i=fileslist.options.length-1; i>=0; i--)
{
if(fileslist.options[i].selected == true)
{
//Remove file at JavaPowUpload list by Index
JavaPowUpload.removeFile(parseInt(fileslist.options[i].value));
//Remove file from HTML list;
//fileslist.options.remove(i);
fileslist.options[i] = null;
}
}
updateListBox();
UpdateTotalFilesLable();
}
function updateListBox()
{
var list = JavaPowUpload.getFiles();
var i = 0;
var fileslist = document.getElementById("fileslist");
clearListBox(fileslist);
for(i=0;i<list.size();i++)
{
if(list.get(i).isFile())
fileslist.options[fileslist.options.length] = new Option(list.get(i).getFullPath() +
" (" + list.get(i).getLength() + " bytes)", list.get(i).getIndex(), false, false );
}
}
function ShowServerResponse()
{
var responselable = document.getElementById("serverresponse");
responselable.innerHTML = "Response code " + JavaPowUpload.getLastStatusCode();
responselable.innerHTML += "<br>" + JavaPowUpload.getLastServerResponse();
}
function UpdateTotalFilesLable()
{
document.getElementById("lable").innerHTML = "Total files is "+JavaPowUpload.getProgressInfo().getSelectedFilesCount()+" (" + JavaPowUpload.getProgressInfo().getTotalSize() + " bytes)";
}
<!-- Event "onAddFiles" invokes after new file added to list -->
function JavaPowUpload_onAddFile(listItem)
{
var fileslist = document.getElementById("fileslist");
fileslist.options[fileslist.options.length] = new Option(listItem.getFullPath() +
" (" + listItem.getLength() + " bytes)", listItem.getIndex(), false, false );
UpdateTotalFilesLable();
}
<!-- Event "onFileProgress" invokes periodically during the upload process-->
function JavaPowUpload_onFileProgress()
{
//round percent to 2 decimals
var PercentDone = Math.round(JavaPowUpload.getProgressInfo().getTotalPercent()*100)/100;
document.getElementById("lable").innerHTML = Math.round(PercentDone) + "% uploaded" + " (" + uploadedfilescount + " files)";
updateProgressBar(PercentDone);
}
<!-- Event "onUploadStart" invokes after upload process starts-->
function JavaPowUpload_onUploadStart()
{
}
<!-- Event "onFileFinished" invokes after individual file uploaded.-->
function JavaPowUpload_onFileFinished(listItem)
{
uploadedfilescount++;
//Java.removeFile(listItem.getIndex());
//updateListBox();
}
<!-- Event "onUploadFinish" invokes after upload was finished-->
function JavaPowUpload_onUploadFinish()
{
updateProgressBar(100);
document.getElementById("lable").innerHTML = "Upload complete! " + uploadedfilescount + " files uploaded.";
var fileslist = document.getElementById("fileslist");
//remove uploaded files from JPU
var list = JavaPowUpload.getFiles();
var i = 0;
for(i=list.size()-1;i>=0;i--)
{
if(list.get(i).isFile() && list.get(i).getStatus() == 2)
{
JavaPowUpload.removeFile(list.get(i).getIndex());
}
}
updateListBox();
//clearListBox(fileslist);
ShowServerResponse();
}
</script>
<br>
<br>
<br>
<table><tr>
<td>
<a href="javascript:browsefiles();" class="button">
<span class="browse">Browse files... </span>
</a>
</td>
<td>
<a href="javascript:RemoveAll();" class="button">
<span class="clear">Clear all </span>
</a>
</td>
<td>
<a href="javascript:RemoveSelected();" class="button">
<span class="remove">Remove selected </span>
</a>
</td>
</tr></table>
<select id="fileslist" name="fileslist" style="HEIGHT:150px;WIDTH:300px;" multiple>
</select>
<table border="0" width="300" height="17" cellpadding="0" cellspacing="0">
<tr>
<td>
<table style="background:url(images/progressbar.gif) repeat-x" id="rowProgress" width="1" height="17" cellpadding="0" cellspacing="0">
<tr>
<td style="border-right:1px solid #b8b8b8;border-left:1px solid #b8b8b8;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table><tr>
<td>
<a href="javascript:StartUpload();" class="button">
<span class="upload">Start upload </span>
</a>
</td>
<td>
<a href="javascript:StopUpload();" class="button">
<span class="cancel">Cancel upload </span>
</a>
</td>
</tr></table>
<div id="lable"> </div><br>
<div id="serverresponse"> </div>
<br />
The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpJavaPowUpload/Troubleshooting.html">here</a> what you need for its proper work.
<br/>
<a href="index.htm"><<Return to the samples list</a>
</body>
</html>