本插件兼容IE8、IE9、IE10、IE11、谷歌
html 页面结构：
<!-- 父容器onclick事件和input onclick事件绑定 -->
<div class="upload" id="parentDiv" onclick="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
未选择图片时：
选中后运行效果图：
欢迎交流、指正，有问题联系我 [email protected]