https://github.com/alex-xd/preview-upload

A light and easy use of preview a image uploaded.
https://github.com/alex-xd/preview-upload

Last synced: 10 months ago
JSON representation

A light and easy use of preview a image uploaded.

• Host: GitHub
• URL: https://github.com/alex-xd/preview-upload
• Owner: Alex-xd
• License: mit
• Created: 2016-10-26T05:03:40.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-11-25T14:01:00.000Z (about 9 years ago)
• Last Synced: 2024-04-26T07:00:51.749Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://alex-xd.github.io/preview-upload/DEMO.html
• Size: 8.79 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
## preview.js

[![npm](https://img.shields.io/badge/npm-1.0.6-blue.svg)](https://www.npmjs.com/package/upload-preview)

[![lisence](https://img.shields.io/badge/LISENCE-MIT-green.svg)](https://github.com/Alex-xd/preview-upload)

> A light and easy use plugin for showing a preview before you upload an image.

## Usage

**1. Install preview.js**

`npm install upload-preview` and test it use `npm test` if you want.

or

simply include ``

**2. Use it**

```javascript

preview.listen('#uploader');

```

for example

```html



preview.config({ prvBox:'preview' })

	       .listen('#uploader');

```

**Ps: You can put preview box any where just give it a class or id.**

![show](http://o6x2vif88.bkt.clouddn.com/preview-uploader.png)

## More configurations

You can use `config()` to customalize your preview box.

```html

preview.config({

    prvBox: 'preview',

    width: 200,

    height: 200,

    isAbsPosition: true

}).listen('#uploader');

```

Attribute `isAbsPostion`  means whether to use absolute positioning(set it 'true' to have higher a performance but make the preview box to be a absolute position box).

welcome pr to improve this project & enjoy it.

## LISENCE

MIT