This plug-in is compatible with IE8, IE9, IE10, IE11, Google
html page structure:
<! - parent container onclick input onclick event and the event binding ->
<div class="upload" id="parentDiv" onclick="inputFile.click()">
<input class="change" id="inputFile" type="file" multiple="multiple" />
<img class="showImg" id="previewImage" />
</div>
css style:
body {
display: flex;
justify-content: center;
align-items: center;
}
.upload {
display: inline-block;
position: relative;
background-image: url ( 'img / wuti.jpg'); / * background * default parent vessel /
background-repeat: no-repeat;
background-size: cover;
border: solid 1px red;
width: 300px; / * set the parent container must aspect, the aspect ratio of the parent container if it is 1: 1, preview images may not be displayed completely * /
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 call:
var paramObj = {
parentDivId: 'parentDiv',
previewImageId: 'previewImage',
inputFileId: 'inputFile'
}
PPPlugin.previewFunc(paramObj);
Download plug-picture.preview.plugin.js
picture.preview.plugi
n.js
3.47KB
Download the complete demo:
picturePrevie
w.rar
53.58KB
When the picture is not selected:
Select the run effect diagram:
Welcome exchanges, correct me, there are problems contact me [email protected]