OrakUploader is a new, modern image multi uploader, offering a wide variety of functions.
It’s based on HTML5 so it does not require flash. Easy to implement and use.
Features:
PHP 5.x or higher is required, as well as the JavaScript libraries jQuery and jQuery-UI.
<link type="text/css" href="orakuploader/orakuploader.css" rel="stylesheet"/> <script type="text/javascript" src="orakuploader/jquery.min.js"></script> <script type="text/javascript" src="orakuploader/jquery-ui.min.js"></script> <script type="text/javascript" src="orakuploader/orakuploader.js"></script>
Those are, in order, a CSS file, jQuery, jQuery-UI and OrakUploader.
<div id="images" orakuploader="on"></div>
<script>
$(document).ready(function(){
$('#images').orakuploader({
orakuploader_path : 'orakuploader/',
orakuploader_main_path : 'files',
orakuploader_thumbnail_path : 'files/tn',
orakuploader_add_image : 'images/add.png',
orakuploader_add_label : 'Browser for images',
orakuploader_resize_to : 1000,
orakuploader_thumbnail_size : 250
});
});
</script>
The settings used here are:
orakupload_path - Path to the plugin’s directory
orakuploader_main_path -The directory, where the big images will be uploaded.
orakuploader_thumbnail_path - The directory, where the small images (thumbnails) will be uploaded.
orakuploader_add_image - The path to the image which will appear on the “upload” button.
orakuploader_add_label - The text, which will appear on the “upload” button.
orakuploader_resize_to - Images, wider than the value of this setting (in this case 1000px) will be resized proportionally.
orakuploader_thumbnail_size - The width, in which the thumbnails will be scaled.
Just make sure you have read/write permissions (777) to the main & thumbnail images directory.
By the way, those are just a few of the plugin’s capabilities. You can see the rest of them in the Settings section.
orakuploader_path
| Accepts: string
| Default: not set
| Path to the plugin’s directory
orakuploader_main_path
| Accepts: string
| Default: not set
| The directory, where the big images (original ones) will be uploaded.
orakuploader_thumbnail_path
| Accepts: string
| Default: not set
| The directory, where the small images (thumbnails) will be uploaded.
orakuploader_use_main
| Accepts: boolean, true/false
| Default: false
| If set to true, the “main image” setting will be enabled.
orakuploader_use_sortable
| Accepts: boolean, true/false
| Default: false
| If set to true, the sorting setting will be enabled.
orakuploader_use_dragndrop
| Accepts: boolean, true/false
| Default: false
| If set to true, the Drag & Drop setting will be enabled.
orakuploader_use_rotation
| Accepts: boolean, true/false
| Default: false
| If set to true, the image rotation setting will be enabled.
orakuploader_resize_to
| Accepts: integer
| Default: not set
| If a value is set, the bigger pictures’ width will be scaled proportionally based on the entered value.
orakuploader_thumbnail_size
| Accepts: integer
| Default: 250
| The width, in which the thumbnails will be scaled.
orakuploader_add_image
| Accepts: string
| Default: null
| The path to the “add” button’s image.
orakuploader_add_label
| Accepts: string
| Default: null
| The text, which will appear on the “upload” button
orakuploader_maximum_uploads
| Accepts: integer
| Default: 100
| The maximum number of files that can be uploaded at a time.
orakuploader_watermark
| Accepts: string
| Default: null
| If set to null, the watermark setting will be disabled. To activate, just set the value to the path of the watermark of your choice.
When enabled, the following events can be caught:
orakuploader_main_finished – triggered when files are being uploaded.
orakuploader_main_changed(filename) – triggered when the main image is changed.
orakuploader_picture_deleted(filename) – triggered when an image is deleted.
orakuploader_rearranged – triggered when images are being rearranged.
Example code for all four:
<script>
$(document).ready(function(){
$('#images').orakuploader({
orakuploader_path : 'orakuploader/',
orakuploader_main_path : 'files',
orakuploader_thumbnail_path : 'files/tn',
orakuploader_add_image : 'images/add.png',
orakuploader_add_label : 'Browser for images',
orakuploader_use_main : true,
orakuploader_use_sortable : true,
orakuploader_use_dragndrop : true,
orakuploader_resize_to : 1000,
orakuploader_thumbnail_size : 250,
// Triggered when files are being uploaded.
orakuploader_finished: function() {
alert("Uploading finished.");
},
// Triggered when the main image is changed.
orakuploader_main_changed : function (filename) {
alert("Main Picture was changed to \""+filename+ "\".");
},
// Triggered when images are being rearranged.
orakuploader_rearranged : function() {
alert("You rearranged something.");
},
// Triggered when when an image is deleted.
orakuploader_picture_deleted : function(filename) {
alert("Picture \""+filename+ "\" is deleted.");
}
});
});
</script>
To change the style, simply edit orakuploader.css.
With elementary CSS knowledge, you can edit it to suit your taste.
In case you haven’t read the Settings section, this functionality is enabled easily.
Just use the setting orakuploader_watermark on the plugin initiation, by setting its value to the path of the watermark.
Example in code:
<script>
$(document).ready(function(){
$('#images').orakuploader({
orakuploader_path : 'orakuploader/',
orakuploader_main_path : 'files',
orakuploader_thumbnail_path : 'files/tn',
orakuploader_add_image : 'images/add.png',
orakuploader_add_label : 'Browser for images',
orakuploader_resize_to : 1000,
orakuploader_thumbnail_size : 250,
orakuploader_watermark : 'images/mywatermark.png'
});
});
</script>
Examples from the demo and their code can be found in the examples folder in the archive.