如何在img标签中插入user-glyphicon
[英]how to insert user-glyphicon in img tag
问题描述
The problem is :- In below code I want to make it, if there is no photo uploaded then there will be a photo size bootstrap's glyphicon-user should be placed and when photo uploaded this will overwrite by the uploaded image. 
问题是：-在下面的代码中，我要创建它，如果没有上传照片，则将放置一个照片大小引导程序的glyphicon用户，并且在上传照片时，它将被上传的图像覆盖。
//please add necessary files of bootstrap //请添加必要的引导文件
<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>
//this is the script code for preview image when uploaded. //这是上传时预览图像的脚本代码。
<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>
//this is image code here changes takes place to add bootstrap's glyphicon-user //这是图像代码，此处进行了更改以添加引导程序的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>
I tried this but the glyphicon-user in span tag reside below patient image. 我试过了，但是span标签中的glyphicon用户位于患者图像下方。
2 个解决方案
解决方案1
0 2015-07-09 10:15:37
just suggestion here, why not convert the bootstrap's glyphicon-user to png then add it on since when the user upload the image it will be appended according to your code. 只是在这里的建议，为什么不将bootstrap的glyphicon-user转换为png，然后添加它，因为当用户上传图像时，它将根据您的代码附加。
check a sample here http://jsfiddle.net/ws3bb7sr/1/ 在此处检查示例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>
解决方案2
0 2015-07-09 10:17:03
Not the best idea, but you can use this code: 不是最好的主意，但是您可以使用以下代码：
<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>
You might have some problems with transparent png files, so in better check it. 透明png文件可能会出现一些问题，因此最好进行检查。 If you have some problem with it you can remove the glyphicon classes when you update the src of your image. 如果您有任何问题，可以在更新图像的src时删除glyphicon类。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.