Demo
File/upload control with JavaScript
Code:
<applet id="jumpLoaderApplet" name="jumpLoaderApplet"
code="jmaster.jumploader.app.JumpLoaderApplet.class"
archive="jumploader_z.jar"
width="715"
height="450"
mayscript>
<param name="uc_uploadUrl" value="partitionedUploadHandler.php"/>
</applet>
</p>
<!-- debug auxiliary methods -->
<script language="javascript">
/**
* uploader retrieval
*/
function getUploader() {
return document.jumpLoaderApplet.getUploader();
}
/**
* uploader config retrieval
*/
function getUploaderConfig() {
return document.jumpLoaderApplet.getUploaderConfig();
}
/**
* switch fileAdditionEnabled flag of uploader
*/
function switchFileAdditionEnabled() {
var uploader = getUploader();
uploader.setFileAdditionEnabled( !uploader.isFileAdditionEnabled() );
updateFileAdditionEnabledControlSet();
}
/**
* update fileAdditionEnabled html control set
*/
function updateFileAdditionEnabledControlSet() {
var uploader = getUploader();
var enabled = uploader.isFileAdditionEnabled();
document.getElementById( "uploaderFileAdditionEnabledStatus" ).innerHTML = "" + enabled;
document.getElementById( "uploaderFileAdditionEnabledAction" ).value = "" +
( enabled ? "disable" : "enable" );
}
/**
* switch fileRemovalEnabled flag of uploader
*/
function switchFileRemovalEnabled() {
var uploader = getUploader();
uploader.setFileRemovalEnabled( !uploader.isFileRemovalEnabled() );
updateFileRemovalEnabledControlSet();
}
/**
* update fileRemovalEnabled html control set
*/
function updateFileRemovalEnabledControlSet() {
var uploader = getUploader();
var enabled = uploader.isFileRemovalEnabled();
document.getElementById( "uploaderFileRemovalEnabledStatus" ).innerHTML = "" + enabled;
document.getElementById( "uploaderFileRemovalEnabledAction" ).value = "" +
( enabled ? "disable" : "enable" );
}
/**
* add file
* @param path a full path to file to add
*/
function addFile( path, status, error ) {
var uploader = getUploader();
if( uploader.isFileAdditionEnabled() ) {
var error = getUploader().addFile( path, status, error );
if( error != null ) {
alert( error );
}
}
}
/**
* remove file
* @param index 0-based index of file to remove
*/
function removeFile( index ) {
var uploader = getUploader();
var file = uploader.getFile( index );
if( file != null && file.isRemovable() ) {
var error = uploader.removeFile( file );
if( error != null ) {
alert( error );
}
}
}
/**
* start upload
*/
function startUpload( index ) {
var error = getUploader().startUpload();
if( error != null ) {
alert( error );
}
}
/**
* stop upload
*/
function stopUpload( index ) {
var error = getUploader().stopUpload();
if( error != null ) {
alert( error );
}
}
/**
* stop file upload
* @param index 0-based index of file to stop upload
*/
function stopFileUpload( index ) {
var uploader = getUploader();
var file = uploader.getFile( index );
if( file != null && file.isStoppable() ) {
var error = uploader.stopFileUpload( file );
if( error != null ) {
alert( error );
}
}
}
/**
* retry file upload
* @param index 0-based index of file to stop upload
*/
function retryFileUpload( index ) {
var uploader = getUploader();
var file = uploader.getFile( index );
if( file != null && file.isRetryable() ) {
var error = uploader.retryFileUpload( file );
if( error != null ) {
alert( error );
}
}
}
</script>
<form name="debugForm">
<table class="dataTableOuter" width="100%">
<tr>
<td class="dataHeader">File control</td>
</tr>
<tr>
<td valign="top">
<table class="formTableInner">
<tr>
<td class="formLabel">Can add:</td>
<td class="formControl">
<span id="uploaderFileAdditionEnabledStatus" style="font-weight:bold"></span>
<input id="uploaderFileAdditionEnabledAction" type="button" value="" onClick="switchFileAdditionEnabled()">
</td>
</tr>
<tr>
<td class="formLabel">Add:</td>
<td class="formControl">
Path: <input type="text" name="addFilePath" size="60"><br>
Status:
<select name="addFileStatus">
<option value="0">ready</option>
<option value="1">uploading</option>
<option value="2">finished</option>
<option value="3">failed</option>
</select>
<br>
Error: <input type="text" name="addFileError" size="60"><br>
<input type="button" value="add file" onClick="addFile(
document.debugForm.addFilePath.value,
document.debugForm.addFileStatus.value,
document.debugForm.addFileError.value )">
</td>
</tr>
<tr>
<td class="formLabel">Can remove:</td>
<td class="formControl">
<span id="uploaderFileRemovalEnabledStatus" style="font-weight:bold"></span>
<input id="uploaderFileRemovalEnabledAction" type="button" value="" onClick="switchFileRemovalEnabled()">
</td>
</tr>
<tr>
<td class="formLabel">Index:</td>
<td class="formControl">
<input type="text" name="removeFileIndex" size="60">
<input type="button" value="remove file" onClick="removeFile( document.debugForm.removeFileIndex.value )">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="dataTableOuter" width="100%">
<tr>
<td class="dataHeader">Upload control</td>
</tr>
<tr>
<td valign="top">
<table class="formTableInner">
<tr>
<td class="formLabel">Uploader:</td>
<td class="formControl">
<input type="button" value="start upload" onClick="startUpload()">
<input type="button" value="stop upload" onClick="stopUpload()">
</td>
</tr>
<tr>
<td class="formLabel">Upload URL:</td>
<td class="formControl">
<input type="text" name="uploadUrl" size="60">
<input type="button" value="set" onClick="getUploaderConfig().setUploadUrl( document.debugForm.uploadUrl.value )">
</td>
</tr>
<tr>
<td class="formLabel">Index:</td>
<td class="formControl">
<input type="text" name="stopFileUploadIndex" size="60">
<input type="button" value="stop file upload" onClick="stopFileUpload( document.debugForm.stopFileUploadIndex.value )">
</td>
</tr>
<tr>
<td class="formLabel">Index:</td>
<td class="formControl">
<input type="text" name="retryFileIndex" size="60">
<input type="button" value="retry file" onClick="retryFileUpload( document.debugForm.retryFileIndex.value )">
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
<script language="javascript">
//
// initialize controls
updateFileAdditionEnabledControlSet();
updateFileRemovalEnabledControlSet();
</script>