It’s a JavaScript code 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. Besides selected images the form can contain any additional input fields. How to Integrate 1. Include stylesheet and scripts into the head of the page: 2. Add a form into the body of the document: 3. Add a script to init ImageLoader:
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 onSubmit: function(form){ // form submit handler (optional) // ... validate the form if it\'s needed return true; // return false to prevent uploading the form }, onFinish: function(form, data){ // form uploaded handler (optional) alert(\'ImageLoader: Form has been uploaded\'); // ... redirect to another page or make something with returned data }, onError: function(error){ // form error handler (optional) alert(\'ImageLoader: \' + error); } }); }) 4. Form will be uploaded asynchronously using an AJAX request. Variable names will have the prefix imageloader so you can easy identify them from others. Here is an example of code how to save images on PHP:
foreach($_FILES as $item => $value){ if(substr($item, 0, 11) == \'imageloader\'){ $filename = str_replace(\'_\', \'.\', $item); // filename move_uploaded_file($value[\'tmp_name\'], $filename); } }Buy and Download
