| Server IP : 79.136.114.73 / Your IP : 13.59.91.46 Web Server : Apache/2.4.7 (Ubuntu) PHP/5.5.9-1ubuntu4.29 OpenSSL/1.0.1f System : Linux b8009 3.13.0-170-generic #220-Ubuntu SMP Thu May 9 12:40:49 UTC 2019 x86_64 User : www-data ( 33) PHP Version : 5.5.9-1ubuntu4.29 Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority, MySQL : ON | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : ON | Pkexec : ON Directory : /var/www/icad.astacus.se/project/universal_old/ |
Upload File : |
<!-- saved from url=(0014)about:internet -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Custom UI example</title>
<!-- UniversalUploader css style file -->
<link rel="stylesheet" href="universal/style.css">
<!-- Examples css file -->
<link href="styles.css" type="text/css" rel="stylesheet" />
<!-- UniversalUploader JavaScript code file -->
<script type="text/javascript" src="universal/universalUploader.js"></script>
</head>
<body>
<p>Sample: <b>onlybrowsebutton.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.html"><img border="0" src="images/home.png" width="16" height="16"> Examples home</a><br/>
<br/>
This sample demonstrates <strong>how to customize UI</strong>. Here we render only browse button to select fies for upload and progress bar to disaply information about upload progress. <br>
<!-- PlaceHolder for UniversalUploader User Interface. Existing content will not be removed.
UniversalUpload will append own content to the end of this div-->
<div id="universalUploader_holder" style="width : 200px;">
<a id="browseButton" href="javascript:;">[ Select files ]</a>
<br />
<!-- div element with id uu_controls will contain buttons-->
<!--<div id="uu_controls"></div> -->
<!-- div element with id uu_statusLabel will contain status lable-->
<!--<div id="uu_statusLabel"></div>-->
<!-- div element with id uu_progressBar will contain total progress bar-->
<div id="uu_progressBar"></div>
<br />
<!--<div id="drop_target" class="dropTarget"> Drop files here </div>-->
<!-- div element with id uu_fileList will contain files list-->
<!--<div id="uu_fileList"></div>-->
</div>
<!-- Initialization of UniversalUploader object -->
<script type="text/javascript">
universalUploader.init({
//enable customUI support
customUI : true,
//Set id of element wich will be used to select files
customUI_browseButtonId: 'browseButton',
//Automatically start upload when files added
autoStart: true,
//Your serialNumber
serialNumber: "put your license key here",
//List of uploaders to render
uploaders: "drag-and-drop, flash, silverlight, java, classic",
//First of correctly initialized uploader will be rendered
singleUploader : true,
//Id of html element where universalUploader should be rendered
//If not set, document body used
holder: "universalUploader_holder",
//Url to the swf file
flash_swfUrl : "universal/uploaders/ElementITMultiPowUpload.swf",
//Url to the xap file
silverlight_xapUrl : "universal/uploaders/UltimateUploader.xap",
//url to folder with jar files
java_libPath : "universal/uploaders/java/",
//Path to the folder with images (status icons, remove icon) By default images subfolder is used (relative to the html page base path)
//In these examples we place icons inside universal/images subfolder.
imagesPath : "universal/images/",
//Url to the file processing script
url: "FileProcessingScripts/PHP/uploadfiles.php"
});
//File upload complete
universalUploader.bindEventListener("FileUploadComplete", function (uploaderId, file){
var responselable = document.getElementById("serverresponse");
if(file.serverResponse) responselable.innerHTML += "<strong>" + file.serverResponse + "</strong>";
});
//File upload error handler
universalUploader.bindEventListener("FileUploadError", function (uploaderId, file, status, msg){
var responselable = document.getElementById("serverresponse");
responselable.innerHTML += "File Upload error "+file.name+" status "+status+" message "+msg;
});
universalUploader.bindEventListener("Init", function (inited){
if(!inited)
alert("UniversalUploader failed to init!");
});
</script>
You should see server response below when upload complete:<br/>
<div id="serverresponse"></div>
<br />
<hr />
In this example we defined custom UI in several steps. Firtly, we defined UI elements in "holder":<code>
<pre>
<div id="universalUploader_holder" style="width : 500px;">
<a id="browseButton" href="javascript:;">[ Select files ]</a>
<div id="uu_fileList"></div>
</div><br>
<br />
</pre>
</code>
Secondary, we set to true the value of the customUI parameter and set value of customUI_browseButtonId parameter to tell uploader which element should be used as "browse" button and set to true the value of the autoStart parameter to automatically start upload process when files added:<code>
<pre>
//enable customUI support
customUI : true,
//Set id of element wich will be used to select files
customUI_browseButtonId: 'browseButton',
//Automatically start upload when files added
autoStart: true,
</pre>
</code>
<p>For the example you need to specify script URL that accept the files. Open the example in a text editor and specify the property value "url" of UniversalUploader object. The value can be:</p>
<ul>
<li>For PHP : <code>FileProcessingScripts/PHP/uploadfiles.php</code> <strong>(Default value)</strong></li>
<li>For ASP.NET (C Sharp): <code>FileProcessingScripts/ASP.NET/CSharp/uploadfiles.aspx</code></li>
<li>For ASP.NET (VB.NET): <code>FileProcessingScripts/ASP.NET/VBNET/uploadfiles.aspx</code></li>
<li>For JSP : <code>FileProcessingScripts/JSP/uploadfiles.jsp</code></li>
<li>For ASP : <code>FileProcessingScripts/ASP/uploadfiles.asp</code></li>
</ul>
<br />
<br/>The file uploader doesn’t work? See <a target="_blank" href="http://www.element-it.com/OnlineHelpUniversal/UniversalUploader_Manual_HTML/Troubleshooting.html">here</a> what you need for its proper work.
</body>
</html>