| 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>resizeimagesMultiple.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 to generate several different thumbnails (resized images) for each image file and upload them to server.<br>
In this example for each image file will be generated 3 different thumbnails: </p>
<ol>
<li>
800x600 pixels hieght quality jpeg</li>
<li>
400x300 pixels png</li>
<li>
100x100 pixels low quality jpeg</li>
</ol>
<p>All thumbnails generated with resize mode set to 'fit' .<br>
<br>
There are several resize modes available:<br>
<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. <br>
<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.<br>
<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,
//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 image rotation feature
allowRotateImages : true,
//Determines whether images should be resized during upload
resizeImages: true,
//Resize images configuration
resizeImages_options :
[
{
//Resized image dimension
width: 800,
height: 600,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 100,
//Format of result image
format : 'jpeg',
//Prefix for result image
filePrefix : 'large_jpeg_hightquality'
},
{
//Resized image dimension
width: 400,
height: 300,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Format of result image
filePrefix : 'medium_png',
//Prefix for result image
format : 'png'
},
{
width: 100,
height: 100,
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 20,
//Format of result image
format : 'jpeg',
//Prefix for result image
filePrefix : 'small_jpeg_lowquality'
}
],
//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"
});
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>
<div id="serverresponse"></div>
<div id="thumbnails"></div>
<br />
<br/>
<hr/>
In this example we set the value of the <strong>resizeImages</strong> parameter to the 'true' and set the value of the <strong>resizeImnages_options</strong> parameter as array of configuration objects:
<code>
<pre>
universalUploader.init({
...
//Determines whether images should be resized during upload
resizeImages: true,
//Resize images configuration
resizeImages_options :
[
{
//Resized image dimension
width: 800,
height: 600,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 100,
//Format of result image
format : 'jpeg',
//Prefix for result image
filePrefix : 'large_jpeg_hightquality'
},
{
//Resized image dimension
width: 400,
height: 300,
//Resize mode of images : fit, fitbywidth, fitbyheight
resizeMode: 'fit',
//Format of result image
filePrefix : 'medium_png',
//Prefix for result image
format : 'png'
},
{
width: 100,
height: 100,
resizeMode: 'fit',
//Quality of generated jpeg files
quality: 20,
//Format of result image
format : 'jpeg',
//Prefix for result image
filePrefix : 'small_jpeg_lowquality'
}
],
...
});</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/>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>