Demo

Scaled images upload

This demo uploads zip file containing 3 scaled instances of original image. After upload links added to the page bottom. Upon file add it's length changed to 16Kb (estimated zip file length) to make upload progress indicator more or less adequate. That's because image scaled on file upload begin.

Code:

                  <applet name="jumpLoaderApplet"
	code="jmaster.jumploader.app.JumpLoaderApplet.class"
	archive="mediautil_z.jar,sanselan_z.jar,jumploader_z.jar"
	width="715"
	height="500"
	mayscript>
    	<param name="uc_sendImageMetadata" value="true"/>
    	<param name="uc_imageEditorEnabled" value="true"/>
        <param name="uc_useLosslessJpegTransformations" value="true"/>
		<param name="uc_uploadUrl" value="partitionedUploadHandler.php"/>
        <param name="uc_uploadScaledImages" value="true"/>
        <param name="uc_scaledInstanceNames" value="small,medium,large"/>
        <param name="uc_scaledInstanceDimensions" value="100x100,200x200,400x400"/>
        <param name="uc_scaledInstanceQualityFactors" value="900,800,700"/>
        <param name="uc_scaledInstanceQualityFactors" value="900,800,700"/>
        <param name="ac_fireUploaderFileAdded" value="true"/>
		<param name="ac_fireUploaderFileStatusChanged" value="true"/>
        <param name="uc_fileNamePattern" value="^.+\.(?i)((jpg)|(jpe)|(jpeg)|(gif)|(png)|(tif)|(tiff))$"/>
        <param name="vc_fileNamePattern" value="^.+\.(?i)((jpg)|(jpe)|(jpeg)|(gif)|(png)|(tif)|(tiff))$"/>
        <param name="vc_disableLocalFileSystem" value="false"/>
        <param name="vc_mainViewFileTreeViewVisible" value="true"/>
        <param name="vc_mainViewFileListViewVisible" value="true"/>
        <param name="uc_imageRotateEnabled" value="true"/>
        <param name="uc_scaledInstancePreserveMetadata" value="true"/>
        <param name="uc_deleteTempFilesOnRemove" value="true"/>
</applet>
<script>
	/**
	 * trace event to events textarea
	 */
	function traceEvent( message ) {
		document.debugForm.txtEvents.value += message + "\r\n";
	}
	/**
	 * file added notification
	 */
	function uploaderFileAdded( uploader, file ) {
		traceEvent( "uploaderFileAdded, index=" + file.getIndex() + ", imageInfo=" + uploader.getImageInfo(file) );
		var originalFileLength = file.getLength();
		var newFileLength = 16384;
		file.setLength( newFileLength );
		traceEvent( "file length changed to " + newFileLength + ", orignal length is " + originalFileLength );
	}
	/**
	 * file status changed notification
	 */
	function uploaderFileStatusChanged( uploader, file ) {
		traceEvent( "uploaderFileStatusChanged, index=" + file.getIndex() +
			", status=" + file.getStatus() +
			", content=" + file.getResponseContent() );
		//
		//	add download link if finished
		if( file.isFinished() ) {
			var serverFileName = file.getId() + "." + file.getName() + ".zip";
			var linkHtml = "<a href='/uploaded/" + serverFileName + "'>" + serverFileName + "</a> " + file.getLength() + " bytes";
			var container = document.getElementById( "fileLinks");
			container.innerHTML += linkHtml + "<br>";
		}
	}
</script>
<form name="debugForm">
	<p>Events:<br>
	<textarea name="txtEvents" style="width:100%; font:10px monospace" rows="10" wrap="off" id="txtEvents"></textarea>
	</p>
</form>
<div id="fileLinks">
</div>

advertising

— easy and efficient web file manager.