如何在img标签中插入user-glyphicon

Question

问题是：-在下面的代码中，我要创建它，如果没有上传照片，则将放置一个照片大小引导程序的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用户位于患者图像下方。

Answer 1

只是在这里的建议，为什么不将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>

Answer 2

不是最好的主意，但是您可以使用以下代码：

<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类。

如何在img标签中插入user-glyphicon

问题描述

2 个解决方案

解决方案1
0 2015-07-09 10:15:37

解决方案2
0 2015-07-09 10:17:03

如何在img标签中插入user-glyphicon

问题描述

2 个解决方案

解决方案1 0 2015-07-09 10:15:37

解决方案2 0 2015-07-09 10:17:03

解决方案1
0 2015-07-09 10:15:37

解决方案2
0 2015-07-09 10:17:03