5 File Upload Plugins in jQuery

Here i explain some file upload plugins in jQuery. I hope these will help you.

1. Uploadify

Uploadify™ is a jQuery plugin that allows you to easily add multiple file upload functionality to your website. Two distinct versions (HTML5 and Flash) allow you the flexiblity to choose the right implementation for your site and fallback methods make it degrade gracefully.
Features:
* Multiple File Uploads
* Drag and Drop
* Real-Time Progress Indicators
* Custom Upload Restrictions
* Extreme Customization

DEMO / DOWNLOAD 

 

2. Fileuploader

Beautiful and powerful HTML5 file uploading tool. A jQuery and PHP plugin that transforms the standard file input into a revolutionary and fancy field on your page.You can very easy design your own input and file preview elements with HTML/CSS and jQuery. We have also prepared 4 responsive and clean templates that you can use.It is very easy to implement the Fileuploader plugin into your Webpage, also based on WordPress, Joomla, TYPO3, Laravel and others.
Features:
* Design your own input
* Add files from different folders
* Drag&Drop and Ajax upload
* Enable the edit mode
* Validate and control

DEMO / DOWNLOAD 

 

3. Plupload

Plupload using HTML5 APIs. Always. Plupload is based on multi-runtime pollyfills for XMLHttpRequest L2, File and Image APIs. So when there’s no HTML5 available in the browser.Files that have to be uploaded can be small or huge – about several gigabytes in size. In such cases standard upload may fail, since browsers still cannot handle it properly. We slice the files in chunks and send them out one by one. You can then safely collect them on the server and combine into original file.
Features:
* Upload in HTML5
* Drag’n’Drop Files from Desktop
* Access Raw File Data
* Shrink Images on Client-Side
* Upload in Chunks
* Translated to 30+ Languages

DEMO / DOWNLOAD 

 

4. jQuery Upload File

jQuery File UPload plugin provides Multiple file uploads with progress bar. jQuery File Upload Plugin depends on Ajax Form Plugin, So Github contains source code with and without Form plugin.
Features:
* Single File Upload
* Multiple file Upload (Drag & Drop)
* Sequential file upload
* File Restrictions
* Localization (Multi-language)
* Sending Form Data
* Adding HTML elements to progressbar
* Custom UI
* Upload Events
* Delete / Download Uploaded files
* Image Preview
* Show previous uploads

DEMO / DOWNLOAD 

 

5. jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery UI.
Supports cross-domain, chunked and resumable file uploads and client-side image resizing.
Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

DEMO / DOWNLOAD

Top 8 Add-ons of Mozilla Firefox and Chrome for Developers

These are important addons for firefox and chrome.

1. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Features:
* Inspect HTML and modify style and layout in real-time
* Use the most advanced JavaScript debugger available for any browser
* Accurately analyze network usage and performance
* Extend Firebug and add features to make Firebug even more powerful
* Get the information you need to get it done with Firebug.

2. YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is available for Firefox as an add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset. It offers suggestions for improving the page’s performance, summarizes the page’s components, displays statistics about the page. Features:
* Grades web page based on one of three predefined ruleset or a user-defined ruleset;
* It offers suggestions for improving the page’s performance;
* Summarizes the page’s components;
* Displays statistics about the page;
* Provides tools for performance analysis, including Smush.it™ and JSLint.

3. Nimbus Screen Capture – editable screenshots

Nimbus Screenshot supports horizontal scrolling. The editor interface allows editing objects even after you add them to the screenshot (and this feature is totally unique)!
Good alternative to TechSmith Snagit extension or Awesome Screenshot. Features:
* Capture the whole web page or a required section of it;
* Capture the whole browser window (!);
* Create your own drawing or model from scratch (!);
* Paste different patterns and text boxes to your screenshot;
* Resize and crop your screenshot;
* Add arrows and stickers to your screenshot (!);
* Save screenshots in any of the following formats: JPG, PNG, BMP;
* Save screenshots to Google Drive.

4. SQL Inject Me

SQL Inject Me is the Exploit-Me tool used to test for SQL Injection vulnerabilities.
The tool works by submitting your HTML forms and substituting the form value with strings that are representative of an SQL Injection attack.
The tool works by sending database escape strings through the form fields. It then looks for database error messages that are output into the rendered HTML of the page.
The tool does not attempting to compromise the security of the given system. It looks for possible entry points for an attack against the system. There is no port scanning, packet sniffing, password hacking or firewall attacks done by the tool.
You can think of the work done by the tool as the same as the QA testers for the site manually entering all of these strings into the form fields.

5. RESTClient, a debugger for RESTful web services

RESTClient supports all HTTP methods RFC2616 (HTTP/1.1) and RFC2518 (WebDAV). You can construct custom HTTP request (custom method with resources URI and HTTP request Body) to directly test requests against a server.

6 : colorPicker

Very simple and similar in function to Internet Explorer's color picker. Useful for finding the exact color code (RGB or Hex) of any pixel displayed on any webpage. Click on the colorPicker icon and then place your mouse over any pixel in the browser. The panel will display the color of the pixel currently under the mouse icon as well as both the RGB and Hex code of that color. Press escape to copy the CSS and HTML ready RGB or Hex code to your clipboard (select which type from the panel). There is no trust required like other complicated color tools - the source is all javascript and simple to read!

7:Screengrab

Original Screengrab! add-on by Andy M for Mozilla Firefox is abandoned March 21, 2010:
https://addons.mozilla.org/firefox/addon/screengrab/

Screengrab! saves entire webpages as images. Just right-click on the page you want to grab and look in the "Screengrab" menu.
It will capture what you can see in the window, the entire page, just a selection, a particular frame... basically it saves webpages as images - either to a file, or to the clipboard, or upload to internet.

Screengrab! for Google Chrome:
https://chrome.google.com/webstore/detail/screengrab/fccdiabakoglkihagkjmaomipdeegbpk

 

 8 : Web Developer

Adds a menu and a toolbar with various web developer tools.The Web Developer extension adds various web developer tools to the browser. 

 

Magento: How to check if current page is homepage?

Here is a quick Magento code to check if the current page is homepage or not.

If you are in template/page/html/header.phtml template file, then you can check for homepage with the following code:

if($this->getIsHomePage()) {     echo 'You are in Homepage!'; } else {     echo 'You are NOT in Homepage!'; }

If you are elsewhere (in any other .phtml template file or in any other .php class file) then you can use the following code:

if(Mage::getBlockSingleton('page/html_header')->getIsHomePage()) {

    echo 'You are in Homepage!';

} else {

    echo 'You are NOT in Homepage!';

}

Below is an alternative way to check for homepage:-

$routeName = Mage::app()->getRequest()->getRouteName();

$identifier = Mage::getSingleton('cms/page')->getIdentifier();

if($routeName == 'cms' && $identifier == 'home') {

    echo 'You are in Homepage!';

} else {

    echo 'You are NOT in Homepage!';

}

Hope this helps. Thanks