JS Image Loader 1.3 Source Code Download

Posted on

JS Image Loader 1.3 – Learn how to create a JS Image Loader 1.3 using Javascript. This easy application can be used in any system that needed a login verification. Javascript is a web and mobile in force system developed to built web and mobile application. It used in several gadgets next smartphones, tablets, and even television. Javascript is open source to developers who has an interest in developing website or mobile apps. It with provides an adaptive framework that allows the developer to develop apps in a simpler way. In this iOS application source code you will learn nearly canvas,form,images,jpeg,js,loader,module,png,preloader,resize,rotate,script,submit,uploader,web.

Choose from over 1,200 Javascript app templates. Explore items created by our global community of independent developers, confident they’re hand-reviewed by us. Please download (title) source code project through link below.

Script DemoDownload Script

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:

<link href="imageloader.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="jquery-1.7.min.js"></script>
<script type="text/javascript" src="imageloader.min.js"></script>

2. Add a form into the body of the document:

<form class="imageloaderForm" method="post" 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">

3. Add a script to init ImageLoader:

document.addEventListener("DOMContentLoaded", function ()     
      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:

while(list($item, $value) = each($_FILES))
   if(substr($item, 0, 11) == 'imageloader')
      $filename = str_replace('_', '.', $item); // filename
      move_uploaded_file($value['tmp_name'], $filename);

Script DemoDownload Script


Leave a Reply

Your email address will not be published. Required fields are marked *