Steps for adding a user-glyphicon within an img tag

Question

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image.

//Please ensure necessary Bootstrap files are included

<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 script is for previewing the uploaded image

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

//Changes have been made here to incorporate the 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>

I attempted this setup, however, the glyphicon-user in the span tag appears below the patient image.

html css twitter-bootstrap

Answer 1

Answer №1

One idea to consider is converting Bootstrap's glyphicon-user to a PNG and then adding it to the code so that when a user uploads an image, it will be appended according to the existing code.

You can see a sample of this implementation here: 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

One idea to consider is converting Bootstrap's glyphicon-user to a PNG and then adding it to the code so that when a user uploads an image, it will be appended according to the existing code.

You can see a sample of this implementation here: 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 3

Answer №2

It may not be the most ideal solution, but here's a code snippet you can try:

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

If you encounter issues with transparent PNG files, it's recommended to double-check them. You can also try removing the glyphicon classes when updating the image src if problems persist.

Answer 4

It may not be the most ideal solution, but here's a code snippet you can try:

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

If you encounter issues with transparent PNG files, it's recommended to double-check them. You can also try removing the glyphicon classes when updating the image src if problems persist.

Steps for adding a user-glyphicon within an img tag

Answer №1

Answer №2

Similar questions

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

Refreshing a page will disable dark mode

Is there a way to include an optional backslash in URLs using the .htaccess file without leading browsers to believe I am navigating to a subfolder?

Are Your Padding Styles Missing?

submitting two contact forms using ajax

Methods to fill a data table cell

Modifications to the selected input do not impact the current state of the model

Expansive Child Division with Ample Margins

Enhancing navigation functionality using CSS

How to perfectly align columns using Bootstrap

Autofill functions may not be compatible with input fields generated using JavaScript

What is the process for adjusting the color of a div?

Attempting to integrate the Angular2 module text-mask-addon into the project

Is the default animation duration of Compass being ignored?

Tips for resetting form fields and clearing previous values before resubmitting the form, allowing for a fresh start with empty fields

What could be causing my file input to appear misaligned?

Improving the Performance of HTML/CSS Animations - Enhanced Animation Speed

Concealing a button within a specific interface

Issue with $http.get in fetching information from PHP server

Pictures may become distorted when their width is smaller than the container