| 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>Upload with form 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>integrateInForm.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/>
Often you need to integrate file upload functionality into existing form. This example demostrate how to do that. When user submit form, upload process will be initiated, when upload complete form will be submited in regular way. <br>
Additionaly all form values will be <strong>transferred</strong> to server with uploaded files during upload process. The values transferred by POST method. <br />
Use Request.Form[fieldname] (for ASP) or $_POST[fieldname] (for PHP) collections to read Form fields values on server. <br />
<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 : 400px;">
<a id="browseButton" href="javascript:;">[ Select files ]</a>
<br />
<!-- div element with id uu_fileList will contain files list-->
<div id="uu_fileList"></div>
<!-- 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>
<!-- Initialization of UniversalUploader object -->
<script type="text/javascript">
universalUploader.init({
//Your serialNumber
serialNumber: "put your license key here",
width : 400,
height: 200,
//enable customUI support
customUI : true,
//Set id of element wich will be used to select files
customUI_browseButtonId: 'browseButton',
//List of uploaders to render
uploaders: "drag-and-drop, flash, silverlight, java, classic",
//Fir 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 fies
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",
//Set id of html for element to pass it's values to the server script along with files
formName: "myform",
//Custom post fields can be configured manually
postFields :{
userName : "Jhon",
albumID : "2398296839275"
}
});
var uploadComplete = false;
//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!");
});
universalUploader.bindEventListener("UploadComplete", function (uploaderId){
uploadComplete = true;
alert("Now its time to submit our html form. Uncomment line next to this alert to do that.");
//Uncomment next line to enable form submit after upload
//document.getElementById("myform").submit();
});
universalUploader.bindEventListener("Error", function (uploaderId, message){
uploadComplete = false;
});
function uploadAndSubmit()
{
if(!uploadComplete)
universalUploader.startUpload();
return uploadComplete;
}
</script>
<form method="get" id="myform" name="myform" action="uploadWithForm.html" onSubmit="return uploadAndSubmit();">
Form fields:<br>
<select name="menu">
<option value="1">some menu item 1</option>
<option value="2">some menu item 2</option>
</select>
<input name="text" type="text" value="some text">
<input type="submit" value="Submit form" />
</form>
<br/>
You should see server response below when upload complete:<br/>
<div id="serverresponse"></div><br />
<hr />
<br>
We use "UploadComplete" event to submit form when upload complete. Please check source code of this example to see java script code.
<br>
To pass form fields to server script we set the value of the <strong>formName</strong> parameter to the 'myform' - id of <form> element on this page. <br />
Additionaly we pass several custom variables to server side script by setting the <strong>postFields</strong> parameter:<br />
<code>
<pre>
universalUploader.init({
//Your serialNumber
serialNumber: "put your license key here",
//enable customUI support
customUI : true,
//Set id of element wich will be used to select files
customUI_browseButtonId: 'browseButton',
//List of uploaders to render
uploaders: "drag-and-drop, flash, silverlight, java, classic",
//Fir 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 fies
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",
//Set id of html for element to pass it's values to the server script along with files
formName: "myform",
//Custom post fields can be configured manually
postFields :{
userName : "Jhon",
albumID : "2398296839275"
}
});</pre>
</code></p>
<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/>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>