https://github.com/chrismademe/jquery-image-upload

https://github.com/chrismademe/jquery-image-upload

Last synced: 2 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/chrismademe/jquery-image-upload
• Owner: chrismademe
• Created: 2015-10-29T11:47:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2015-10-29T16:24:58.000Z (about 9 years ago)
• Last Synced: 2023-03-06T14:22:07.895Z (over 1 year ago)
• Language: JavaScript
• Size: 160 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# jQuery Image Upload

Simple jQuery plugin to provide instant image uploads via AJAX.

## Usage

The plugin was developed on version 1.9.1 of jQuery but I'm sure it'll work just fine on others.

__Include jQuery and the plugin:__

```javascript

```

_If you need them, include the base styles in the `` of your page._

```javascript

```

__Initialise the plugin:__

```javascript

$(document).ready(function() {

    $('#file_input').imageUpload();

});

```

__All Options and Callbacks__

```javascript

$(document).ready(function() {

    $('[data-rel="image"]').imageUpload({

        // Defaults to the parent of the file input

        container: '.container',

        // Array of allow extensions

        allowed: ['jpg', 'jpeg', 'gif', 'png'],

        // Form ID or element for the form data

        form: '#form',

        // Script to send AJAX request to

        handler: 'upload.php',

        // onInit Callback - fired on plugin initilisation

        onInit: function() {

            console.log('Plugin initialised');

        },

        // onSuccess Callback - fired on successful response from AJAX request

        onSuccess: function() {

            console.log('Yeeeaahh!!!');

        },

        // onFail Callback - fired on unsuccessful response from AJAX request

        onFail: function() {

            console.log('Ohh snap...');

        },

        // onError Callback - fired when there was an error sending the AJAX request

        onError: function() {

            console.log('It broke.');

        }

    });

});

```

## IMPORTANT: File type validation

Whilst this plugin can check file extensions, it does nothing else to validate the uploaded file. You must ensure that your server side script is handling file type and extension checking as well. _Never use this plugin in production without the necassary validation server side!!_

## Handling files server-side

jQuery Image Upload is a UI tool, it simply makes uploading images instant and more visually pleasing. By default, the plugin will try to upload files to a PHP script `upload.php`. You can override this with the path to your script in when initialising the plugin.

```javascript

$(document).ready(function() {

    $('#file_input').imageUpload({

        'handler': '/path/to/my/script.php'

    });

});

```