| 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>Single uploader 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>resizeimages.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 example shows the possibility of resize images on client side and upload them to server. In this example images will be resized to 400 px by width and 300 px by height. Images will be resized by largest side (resizeMode "fit")
<!-- PlaceHolder for UniversalUploader User Interface. Existing content will not be removed.
UniversalUpload will append own content to the end of this div--> .</p>
<p>There are several resize modes available:</p>
<p><strong>fit</strong> - uploader will generate thumbnails with a size based on the aspect ratio of an original image. Longest side of original image will be taken as base. </p>
<p><strong>fitByWidth</strong> - the result thumbnail will always have specified width. The result thumbnails height calculated with respect of the the aspect ratio of the original image.</p>
<p><strong>fitByHeight</strong> - the result thumbnail will always have specified height. The result thumbnails width calculated with respect of the the aspect ratio of the original image.</p>
<p> </p>
<div id="universalUploader_holder" ><noscript>Place standard form with file input here for users who have disabled JS in browser.<br/>
Form snippet:<br/>
<form id="myform" name="myform" action="url to file processing script" method="post" enctype="multipart/form-data">
<input name="Filedata" type="file"><br>
<input type="submit" value="Upload" />
</form>
</noscript>
</div>
<!-- Initialization of UniversalUploader object -->
<script type="text/javascript">
universalUploader.init({
//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,
//Determine whether tab header should be displayed or not
renderTabHeader: false,
//View of files: list or thumbnails
fileView : "thumbnails",
//Width of thumbnails for preview
thumbnailView_width: 120,
//Heigth of thumbnails for preview
thumbnailView_height: 120,
//An array of files extensions which are allowed for upload. Extensions are splitted by comma. You should set only file extensions here without dot or asterix.
fileFilter_types : "jpg,jpeg,gif,png",
//Enable images rotation feature
allowRotateImages : true,
//Determines whether images should be resized during upload
resizeImages: true,
//Image resize options
resizeImages_options :
[
{
//Resized image dimension
width: 400,
height: 300,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 85,
filePrefix : 'resized'
}
],
//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"
});
var path_to_file = "";
//File upload complete
universalUploader.bindEventListener("FileUploadComplete", function (uploaderId, file){
path_to_file = universalUploader.options.url;
path_to_file = path_to_file.substring(0, path_to_file.lastIndexOf("/")+1) + "UploadedFiles/";
//Here we need parse server response
//and find url to uploaded thumbnails
var response = file.serverResponse;
var keyword = 'File ';
var keywor_end = " was successfully uploaded";
var ind = response.indexOf(keyword,0);
while(ind>=0)
{
url = response.substring(ind+keyword.length, response.indexOf(keywor_end, ind));
addThumbnail(url);
ind = response.indexOf(keyword, ind+keyword.length+1);
}
});
function addThumbnail(source)
{
var Img = document.createElement("img");
Img.style.margin = "5px";
Img.src = path_to_file+source+"?"+(new Date()).getTime();;
document.getElementById("thumbnails").appendChild(Img);
}
//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 uploaded images here when upload complete:<br/>
<div id="thumbnails"></div>
<br/>
<hr/>
In this example we set the value of the <strong>resizeImages</strong> parameter to the 'true' and set configuration object to <strong>resizeImages_options</strong> parameter<code>
<pre>
universalUploader.init({
//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 : false,
//Determine whether tab header should be displayed or not
renderTabHeader: false,
chunkedUpload: false,
//View of files: list or thumbnails
fileView : "thumbnails",
//Width of thumbnails for preview
thumbnailView_width: 120,
//Heigth of thumbnails for preview
thumbnailView_height: 120,
//An array of files extensions which are allowed for upload. Extensions are splitted by comma. You should set only file extensions here without dot or asterix.
fileFilter_types : "jpg,jpeg,gif,png",
allowRotateImages : true,
//Determines whether images should be resized during upload
resizeImages: true,
//Image resize options
resizeImages_options :
[
{
//Resized image dimension
width: 400,
height: 300,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 85,
filePrefix : 'resized'
}
],
//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"
});</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>
</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>