plugin--图片居中预览--不裁剪（兼容IE8、IE9、IE10、IE11、谷歌）

本插件兼容IE8、IE9、IE10、IE11、谷歌

html 页面结构：

<!-- 父容器onclick事件和input onclick事件绑定 -->

<div class="upload" id="parentDiv" οnclick="inputFile.click()">

<input class="change" id="inputFile" type="file" multiple="multiple" />

<img class="showImg" id="previewImage" />

</div>

css 样式：

body {

display: flex;

justify-content: center;

align-items: center;

}

.upload {

display: inline-block;

position: relative;

background-image: url('img/wuti.jpg');/*父容器默认背景图*/

background-repeat: no-repeat;

background-size: cover;

border: solid 1px red;

width: 300px;/*父容器高宽必须设置，父容器的高宽比若不是1:1，预览的图片可能显示不完全*/

height: 300px;

display: flex;

justify-content: center;

align-items: center;

}

.upload .change {

position: absolute;

overflow: hidden;

right: 0;

top: 0;

opacity: 0;

}

.upload .showImg {

display: none;

}

js调用：

var paramObj = {

parentDivId: 'parentDiv',

previewImageId: 'previewImage',

inputFileId: 'inputFile'

}

PPPlugin.previewFunc(paramObj);

 

插件 picture.preview.plugin.js 下载

picture.preview.plugi

n.js

3.47KB

 

 

完整demo下载：

picturePrevie

w.rar

53.58KB

未选择图片时：

 

选中后运行效果图：

 

欢迎交流、指正，有问题联系我 hxh597229264@sina.com