WebAppers

/ best free open source web resources /

Shopify

Create a HTML5 Drag & Drop File Uploader with jQuery

Posted · Category: License Free, Upload

InsertHTML has written a tutorial: Creating a Complete HTML5 Drag and Drop File Uploader with jQuery. They tell us how to create a file uploader using HTML5 drag and drop, along with the file reader API and some PHP. We will also be using local storage to remember which files were uploaded by the user.

As you’d imagine, this doesn’t work in the latest stable release of internet explorer. However, it should work fine in any other modern browser.

drag-and-drop-upload

Requirements: jQuery Framework
Demo: http://www.inserthtml.com/demo/file-upload/
License: License Free

A Pretty Animated Percentage Loader jQuery Plugin

Posted · Category: BSD License, Upload

jQuery.PercentageLoader is a jQuery plugin for displaying a progress widget in more visually striking way than the ubiquitous horizontal progress bar / textual counter. Installation and use is quick and simple.

It makes use of HTML 5 canvas for a rich graphical appearance with only a 10kb (minified) javascript file necessary (suggested web font optional), using vectors rather than images so can be easily deployed at various sizes. It is open source released under BSD licensed.

jquery-progress-loader

Requirements: jQuery Framework
Demo: http://widgets.better2web.com/loader/
License: BSD License

Filepicker.io – A Handy Upload Form for the Web

Posted · Category: License Free, Upload

Filepicker.io is basically a handy upload form for the web. Most websites only allow you to upload files from your local computer, so if you want to upload your facebook profile picture, it’s a big pain. Filepicker.io makes it super simple to allow users to upload their online content.

When you want a file of users, you can let user selecting the file via a popup window of Filepicker.io. Once the user clicked “Upload”, it will then return a unique URL pointing to the file the user chose for your website. Users can also upload files from Dropbox or Facebook too.

filepicker-io

Requirements: -
Demo: https://www.filepicker.io/
License: License Free

jQuery File Upload with Progress Bars and Previews

Posted · Category: MIT License, Upload

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

The jQuery UI widget factory is a requirement for the basic File Upload plugin, but very lightweight without any other dependencies. The User Interface is built with Twitter’s Bootstrap Toolkit. This enables a CSS based, responsive layout and fancy transition effects on modern browsers. The demo also includes the Bootstrap Image Gallery Plugin. Both of these components are optional and not required.

jquery-file-upload

Requirements: jQuery Framework
Demo: http://blueimp.github.com/jQuery-File-Upload/
License: MIT License

JavaScript Library for Resumable Uploads via HTML5 File API

Posted · Category: MIT License, Upload

Resumable.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. The library is designed to introduce fault-tolerance into the upload of large files through HTTP. This is done by splitting each files into small chunks; whenever the upload of a chunk fails, uploading is retried until the procedure completes.

Resumable.js allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause and resume uploads without loosing state. Currently, it is limited to Firefox 4+ and Chrome 11+.

resume-upload

Requirements: HTML5 and JavaScript Framework
Demo: https://github.com/23/resumable.js
License: MIT License

A JavaScript Preloader with Download Status and Priorities

Posted · Category: MIT License, Upload

PxLoader is a Javascript library that helps you download images, sound files or anything else you need before you take a specific action on your site (like showing a user interface or starting a game). You can use it to create a preloader for HTML5 games (e.g. Cut the Rope) and websites.

It let’s you monitor download status by providing progress and completed events and it lets you prioritize the order in which items are downloaded. You can even tag groups of files and then prioritize downloads or register for events by tag.

pxloader

Requirements: Javascript Framework
Demo: http://thinkpixellab.com/pxloader/
License: MIT License

Tutorial: HTML5 File Upload with Progress Bar

Posted · Category: MIT License, Upload

Html5 finally solves an age old problem of being able to upload files while also showing the upload progress. Essentially, what you need to do is hook into the server’s byte stream while it is receiving a file so you know how many bytes you’ve received and somehow convey that information back to the client browser, while it is still in the process of uploading the file.

Matlus has written a really throughout tutorial on how to make a HTML5 File Upload with Progress, which is uploading of files using XMLHttpRequest and providing upload progress information to the end-user. This solution does not require any change to the server side, at least insofar as handling the multipart/form-data protocol. So existing server side logic should remain unchanged, which makes adapting this technology that much easier.

html5-file-upload

Requirements: HTML5 Supported Browsers
Demo: http://exposureroom.biz/upload.aspx
License: MIT License

Create HTML5 Canvas Preloaders with CanvasLoader

Posted · Category: License Free, Upload

The Heartcode CanvasLoader is a lightweight JavaScript UI library, which uses the HTML5 Canvas element to draw and animate circular preloaders. The Heartcode CanvasLoader runs in every ‘good’ browser which supports the HTML5 Canvas element.

To build your custom preloader, use the “CanvasLoader Builder” section. There is a bunch of parameters you can play with. If you are happy with your preloader, use the code snippet or download your custom HTML example file which contains your CanvasLoader instance and the embedding instructions.

canvas-loader

Requirements: HTML5 Canvas Support
Demo: http://heartcode.robertpataki.com/canvasloader/
License: License Free

Create Spinning Progress Indicator with Spin.js

Posted · Category: MIT License, Upload

Spin.js uses the CSS3 to render the UI, falling back to VML Internet Explorer. If supported by the browser, @keyframe rules are used to animate the spinner. The spin() method creates the necessary HTML elements and starts the animation. If a target element is passed as argument, the spinner is added as first child and horizontally and vertically centered.

There is no images and external CSS for Spin.js. It is highly configurable, and works in all major browsers, including IE6. It is smaller than an animated GIF (2.8K minified, 1.7K gzipped).

spin-progress-bar

Requirements: Javascript Framework
Demo: http://fgnass.github.com/spin.js/
License: MIT License

HTML5 Drag & Drop Image File Uploader jQuery Plugin

Posted · Category: MIT License, Upload

Droparea is a HTML5 drag and drop image file uploader jQuery plug-in and a php script for server-side. Simply drag the image file into the specified area, the image will be automatically uploaded to your server. You can also see the progress of the upload too. It has been tested on Google Chrome and Mozilla Firefox.

drag-drop-image-upload

Requirements: jQuery Framework
Demo: http://gokercebeci.com/dev/droparea
License: MIT License

Page 2 of 4«1234»
Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons