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