It’s a JavaScript script that can be easy integrated into any web application and work in actual web browsers. After the integration you can add images into the form and they will be uploaded on server. Images can be moved or rotated and they all will be resized automatically on the client side. Without jQuery, only pure JavaScript.
How to Integrate
1. Include stylesheet and script into the head section:
<link href="imageloader.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="imageloader.js"></script>
2. Add a form into the body of the document:
<form class="imageloaderForm" method="post" enctype="multipart/form-data" action="save.php">
<input type="button" class="imageloaderBrowse" value="Browse Images">
<input type="button" class="imageloaderClear" value="Clear All">
<div class="imageloaderFiles" />
<input type="submit" value="Send Form" onClick="this.value = 'Uploading...'">
</form>
3. Add a script to init ImageLoader:
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
ImageLoader.init({
limit: 5, // files limit
resize: true, // resize images or not (true/false)
moveSpeed: 100, // animation speed during sorting
maxWidth: 500, // max width if 'resize' enabled
maxHeight: 500, // max height if 'resize' enabled
isJpeg: false, // images format is JPEG or PNG with alpha channel (true/false)
jpegQuality: 0.8, // jpeg quality of images if 'isJpeg' enabled (from 0 to 1)
jpegBg: '#FFFFFF', // background fill color if 'isJpeg' enabled
form: 'imageloaderForm', // form class name
files: 'imageloaderFiles', // files container class name
file: 'imageloaderFile', // file class name
image: 'imageloaderImage', // image class name
ghost: 'imageloaderGhost', // file ghost class name when sorting
btnBrowse: 'imageloaderBrowse', // browse button class name
btnClear: 'imageloaderClear', // clear button class name (optional)
btnRotate: 'imageloaderRotate', // rotate button class name
btnRemove: 'imageloaderRemove', // remove button class name
rotateTitle: 'Rotate', // rotate button title
removeTitle: 'Remove', // remove button title
filter: ['.jpeg', '.jpg', '.png', '.gif', '.bmp', '.ico'], // files type filter
onInitError: function(error){ // init error handler
alert('ImageLoader: ' + error);
}
});
})
</script>
4. After the form will be submitted all uploaded images will be sended as variables that contain Base64 data. Variable names will have the prefix ‘imageloader’ so you can easy identify them from others. Here is an example of code how to save them into the files on PHP:
if(count($_POST) != 0){
$i = 1;
while (list ($var, $value) = each ($_POST))
if(substr($var, 0, 11) == 'imageloader'){
file_put_contents($i.'.png', base64_decode($value)); // save file
$i++;
}
}
Download JS Image Loader (Loaders and Uploaders)
