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

Question

问题是:- 在下面的代码中，我想做到这一点，如果没有上传照片，那么应该放置一个照片大小的 bootstrap 字形用户，当上传照片时，这将被上传的图像覆盖。

//请添加必要的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>  

//这是上传时预览图片的脚本代码。

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

//这是图像代码，这里发生更改以添加 Bootstrap 的 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-user 位于患者图像下方。

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>