Upload-Image-Preview-jQuery-Plugin

Choose upload image, local preview.

Demo

click here to try it or see below ↓

Usage

HTML

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.upload_preview.min.js"></script>

You should edit the path according your situation.

put this anyWhere

<div class="anyName">
    <input type="file" accept="image/gif, image/jpeg, image/png">
</div>

Or you can use other way to import jQuery and jQuery plugins, such as webpack, browserify

JavaScript

$('.anyName').uploadPreview({
    width: '200px',
    height: '200px',
    backgroundSize: 'cover',
    fontSize: '16px',
    borderRadius: '200px',
    border: '3px solid #dedede',
    lang: 'en', //language
});

Options

Name | Type | Default | Description -------------- | ------ | ------- | --------------------------------- width | String | '200px' | the width of preview area height | String | '200px' | the height of preview area backgroundSize | String | 'cover' | only 'cover', 'contain' fontSize | String | '16px' | the size of words on preview area borderRadius | String | '5px' | border-radius border | String | 0 | the border of preview area lang | String | 'zh-cn' | the language of plugin, now only 'en','zh-cn'

license

MIT