Best jQuery File Upload Plugins & Tutorials with Demo

    HTML 5 Upload Image, Ratio with Drag and Drop

    HTML 5 Upload Image, Ratio with Drag and Drop

    A HTML5 Upload image tool, full use of HTML5 with canvas (with fallback options). Together with a ratio and drag & drop makes this tool ideal for use in a CMS.

    Features:

    • uses canvas to crop the image, no server scripts needed!
    • want to use a server script, no problem! simple change it with additional options
    • full HTML5 support
    • save your image with AJAX or use the tradional FORM input file element
    • uses ratio to let it fit your screen or element
    • easy to use
    • additional options to configure
    • bootstrap 3.1
    • jQuery

    Ajax Upload and Resize an Image with PHP

    Ajax Upload and Resize an Image with PHP
    Today I am presenting the most important social networking feature called ajax upload and resize an image without refreshing the page using jquery and PHP. This tutorial a continuation of my previous post, I just included image re-sizing function for different dimensions. It is very useful for your web project that saves lots of hosting space and bandwidth limit.

    MultiFile : jQuery Multiple File Upload

    MultiFile : jQuery Multiple File Upload

    MultiFile ($.MultiFile) is a non-obstrusive and crucially non-opinionated plugin for jQuery that helps your users easily select multiple files for upload.

    It helps you implement a basic interface to improve the file selection experience of your users whilst providing you, the developer, with 3 simple methods of validation: accepted extensions, number of files and total size.This plugin will never deal with the server-side implementation of your upload solution. This plugin will not upload your files.

    jQuery Ajax Upload Previewer

    jQuery Ajax Upload Previewer

    Dynamic show preview of the selected image before upload it, by jQuery.

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms with jQuery Html5 & CSS3

    Smart Forms is a responsive professional Form Framework / pack with a clean consistent Form UI. The framework includes a variety of form Widgets such as Datepickers, Timepickers, Monthpickers, Colorpickers, Numeric Steppers, UI Sliders, Google maps, toggle switches validation, masking among other features.

    Features:

    • Multiple form inputs
    • File inputs / uploaders
    • CSS3 checkboxes + Radios
    • CSS3 toggle switches
    • CSS3 review & rating
    • Tooltips + vector icons
    • Notification alerts
    • CSS3 multi shape buttons
    • Animated progress bars
    • Simple pricing tables
    • Ajax form processing
    • Input masking
    • PHP CAPTCHA with refresh support
    • 40+ starter templates included
    • Date & time picker widgets

    Block Uploads of Adult or Nude Images using PHP & jQuery

    Block Uploads of Adult or Nude Images using PHP & jQuery

    I found an interesting and useful class file in phpclasses.org, that helps to detect image nudity based on skin pixel score developed by Bakr Alsharif from Egypt. I had integrated this with my previous tutorial Ajax image upload with Jquery and PHP, sure this code helps you to block adult or nudity images.

    jQuery.FileAPI : jQuery plugin for FileAPI

    jQuery.FileAPI : jQuery plugin for FileAPI

    jQuery.FileAPI — jquery plugin for FileAPI (multiupload, image upload, crop, resize and etc.)

    Check File Size Before Form Submit with Html5 & jQuery

    Check File Size Before Form Submit with Html5 & jQuery

    Checking the file size before submitting the form has always been like a forbidden fruit to us, that’s because there was no easy way to access clients’ file system, which can return the exact size of a file before sending it to the server. Old browsers have no inbuilt capability, and Javascript won’t do it, so normally people would use flash to calculate the file size in HTML upload forms, and most of us just preferred to skip the client part, letting server handle the problem.

    But in recent years, the HTML5 is doing wonders for the web browsers. It comes with many features, including the client-side file objects manipulation (File API). Which means we can now throwaway the old methods, and adopt to this new system, which not only returns file properties, but it opens a whole new set of possibilities.

    jQuery T-Shirt Designer

    jQuery T-Shirt Designer

    T­shirt Designer is the tool you have been looking for! You can create now your own t­shirt generator directly on your website. Works with any kind of product and can be integrated in minutes.

    Features:

    • Add unlimited shapes, images and texts
    • Let the user add custom texts to the product
    • Colorizable Text using colorpicker
    • Change the Color, Size and font of the Text
    • Let the user drag, move or remove Elements
    • Google font API Loader
    • Add unlimited custom fonts from google Font or other services
    • Users can upload their own design image or logo to print on t-shirt
    • Shows Preview of the T-shirt as designed
    • users can Choose there favorite Tshirt Color from collection
    • Export Tshirt design as PNG, BMP or JPG
    • Prind Tshirt Design

    Ajax Select and Upload Multiple Images with jQuery

    Ajax Select and Upload Multiple Images with jQuery

    Very few days back I had posted an article about Multiple ajax image upload without refreshing the page using jquery and PHP. In this post I have updated few lines of code that allows to user can select and upload multiple images in single shot, thanks to Lakshmi Maddukuri for sending me a useful piece of code. Just take a quick look this live demo.