Bootstrap 图片上传不显示
Bootstrap Image Upload Not display
我为弹出窗口添加了图片上传时刻,上传选项有一些问题。当点击UPLOAD
SPAN标签图片不上传不在圈内显示,显示上传按钮无法隐藏,请问如何正确设置,请帮我解决这个问题
谢谢
这是我的代码
.img-upld .img-circle {
border-radius: 50%;
}
.img-upld .img-circle {
background:#90b5e0;
}
.img-upld span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-upld .img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
.imageupload.imageupload-disabled {
cursor: not-allowed;
opacity: 0.60;
}
.imageupload.imageupload-disabled > * {
pointer-events: none;
}
.imageupload .panel-title {
margin-right: 15px;
padding-top: 8px;
}
.imageupload .alert {
margin-bottom: 10px;
}
.imageupload .btn-file {
overflow: hidden;
position: relative;
}
.imageupload .btn-file input[type="file"] {
cursor: inherit;
display: block;
font-size: 100px;
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.imageupload .file-tab button {
display: none;
}
.imageupload .file-tab .thumbnail {
margin-bottom: 10px;
}
.imageupload .url-tab {
display: none;
}
.imageupload .url-tab .thumbnail {
margin: 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
<div class="img-upld">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; "> <span>UPLOAD</span>
<!-- The file is stored here. -->
<input type="file" name="image-file"></span>
</div></div>
</div>
</div>
请参考我的代码 CodePen and you need to write file read method for read and view for that refer this link
<input type="file" name="image-file" id="imgupload" style="opacity: 0;">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; opacity: 0;"> <span>UPLOAD</span>
<!-- The file is stored here. -->
</span>
</div></div>
</a>
我为弹出窗口添加了图片上传时刻,上传选项有一些问题。当点击UPLOAD
SPAN标签图片不上传不在圈内显示,显示上传按钮无法隐藏,请问如何正确设置,请帮我解决这个问题
谢谢
这是我的代码
.img-upld .img-circle {
border-radius: 50%;
}
.img-upld .img-circle {
background:#90b5e0;
}
.img-upld span {
text-align:center;
width:100%;
background:white;
bottom:0;
padding:20px 0;
opacity:.5
}
.img-upld .img-thumbnail {
display:inline-block;
overflow: hidden;
height: 140px;
border: 5px solid #fff;
box-shadow: 0 2px 0 2px #dbdbdb;
}
.imageupload.imageupload-disabled {
cursor: not-allowed;
opacity: 0.60;
}
.imageupload.imageupload-disabled > * {
pointer-events: none;
}
.imageupload .panel-title {
margin-right: 15px;
padding-top: 8px;
}
.imageupload .alert {
margin-bottom: 10px;
}
.imageupload .btn-file {
overflow: hidden;
position: relative;
}
.imageupload .btn-file input[type="file"] {
cursor: inherit;
display: block;
font-size: 100px;
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
text-align: right;
top: 0;
}
.imageupload .file-tab button {
display: none;
}
.imageupload .file-tab .thumbnail {
margin-bottom: 10px;
}
.imageupload .url-tab {
display: none;
}
.imageupload .url-tab .thumbnail {
margin: 10px 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex justify-content-center">
<div class="img-upld">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;" type="file">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; "> <span>UPLOAD</span>
<!-- The file is stored here. -->
<input type="file" name="image-file"></span>
</div></div>
</div>
</div>
请参考我的代码 CodePen and you need to write file read method for read and view for that refer this link
<input type="file" name="image-file" id="imgupload" style="opacity: 0;">
<a href="#" onclick="$('#imgupload').trigger('click'); return false;">
<div class="img-thumbnail img-circle">
<div style="position: relative; padding: 0; cursor: pointer;">
<img class="img-circle" style="width: 140px; height: 140px;" >
<span style="position: absolute; color: red; opacity: 0;"> <span>UPLOAD</span>
<!-- The file is stored here. -->
</span>
</div></div>
</a>