adrianmejias / html5-uploader
HTML5 file uploader.
Installs: 21
Dependents: 0
Suggesters: 0
Security: 0
Stars: 1
Watchers: 1
Forks: 0
Open Issues: 0
Language:JavaScript
Requires
- jquery/jquery: 1.11.*
Replaces
- adrianmejias/html5-uploader: 0.0.16
README
Upload files using html5.
Table of contents
Quick start
Several quick start options are available:
- Download the latest release.
- Clone the repo:
git clone https://github.com/adrianmejias/html5-uploader.git
. - Install with Bower:
bower install html5-uploader
.
What's included
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
html5-uploader/
├── html5-uploader.js
├── html5-uploader.min.js
Example
Example file upload and usage:
Demo: https://adrianmejias.com/html5-uploader
<!-- Include jQuery Beforehand --> <script src="html5-uploader.js"></script> <form> <input type="file" name="file"/> </form>
$('input[type=file]').html5uploader();
To override
loaded javascript configuration settings, you will need to add data-*
tags to the file (input) field. The setting accept
may be set without data-
attribute prefix.
Available options
accept
: array|string Mime-types that you wish to accept.- Alternatively you may provide
accept
tag in the file (input) field that will be translated internally. (Nothing fancy though...)
- Alternatively you may provide
fields
: array|string Extra fields you wish to post.- Alternatively you may provide a string assigned as
key=value|key=value|..
in adata-fields
attribute.
- Alternatively you may provide a string assigned as
holder
: string Element name where you drag and drop files to.preview
: object|string Create your own preview function.progress
: object|string Create your own progress function.url
: string The url where the form data will post to.name
: string The name of the form data will post as.complete
: object|string Create your own completion function.debug
: boolean Show console.log report in browser.
<input type="file" accept="image/png|image/jpeg|image/gif" data-url="upload.asp" data-fields="customFields" data-holder=".drag-n-dro-here" data-progress="customProgress" data-preview="customPreview" data-complete="customComplete">
or
<!-- alternate data-fields -->
..data-fields="token=ju3Fn55d24sADfa|type=image"..
$('input[type=file]').html5Uploader({ name: 'file', accept: [ 'image/png', 'image/jpeg', 'image/gif' ], url: 'upload.asp', fields: [ token: 'ju3Fn55d24sADfa' ], holder: '.drag-n-drop-here', progress: function(complete) { console.log('File is uploading. Currently at '+complete+'%'); }, preview: function(file){ console.log('Would you look at this file.', file); }, complete: function(file, response) { console.log('File uploaded.'); }, debug: false });