[英]how to insert user-glyphicon in img tag
問題是:-在下面的代碼中,我要創建它,如果沒有上傳照片,則將放置一個照片大小引導程序的glyphicon用戶,並且在上傳照片時,它將被上傳的圖像覆蓋。
//請添加必要的引導文件
<div class="row">
<div class="row">
<div class="col-md-4">
<h4 class="heading">Upload Patient's Photo :-</h4>
</div>
<div class="col-md-4">
<input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/>
</div>
</div>
//這是上傳時預覽圖像的腳本代碼。
<script>
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#patientimg').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
</script>
</div>
//這是圖像代碼,此處進行了更改以添加引導程序的glyphicon-user
<div class="col-md-2 col-sm-12">
<div class="thumbnail">
<img src="" alt="Select Patient Image" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/>
</div>
</div>
我試過了,但是span標簽中的glyphicon用戶位於患者圖像下方。
只是在這里的建議,為什么不將bootstrap的glyphicon-user轉換為png,然后添加它,因為當用戶上傳圖像時,它將根據您的代碼附加。
在此處檢查示例http://jsfiddle.net/ws3bb7sr/1/
function readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $('#patientimg').attr('src', e.target.result); } reader.readAsDataURL(input.files[0]); } }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <div class="row"> <div class="row"> <div class="col-md-4"> <h4 class="heading">Upload Patient's Photo :-</h4> </div> <div class="col-md-4"> <input type="file" class="form-control" name="patientpic" id="patientpic" onchange="readURL(this)"/> </div> </div> <div class="col-md-2 col-sm-12"> <div class="thumbnail"> <img src="http://s5.postimg.org/4xpbh5oo3/user_000000_128.png" alt="" class="img-responsive" id="patientimg" name="patientimg" style="height:140px;width:140px;font-size:30px;text-align:center;color:gray;"/> </div> </div>
不是最好的主意,但是您可以使用以下代碼:
<html>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-2.1.3.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
#img1 {
width: 100px;
height: 100px;
margin-left: 25px;
}
#img1::before {
position: absolute;
font-size: 100px;
}
</style>
<script>
$(function() {
setTimeout(function() {
$('#img1').attr('src', 'http://dummyimage.com/100x100/0ac72a/0011ff');
}, 2500);
});
</script>
</head>
<body>
<img src="" id="img1" class="glyphicon glyphicon-asterisk">
</body>
</html>
透明png文件可能會出現一些問題,因此最好進行檢查。 如果您有任何問題,可以在更新圖像的src時刪除glyphicon類。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.