how to use glyphicon for upload an image insted of using that long input field?

Question

I mean i want to use any symbol or glyphicon for uploading an image insted of using that so long input field. (For uploading a profile pic)

After clicking on that glyphicon i could choose an image from my computer. below is fiddle for choose an image but it uses input field which is so long.

I want to show that glyphicon on hover a mouse & on another image that is hovering on background image.

how can i do it.. please help..

I am using following code

HTML:-

<input type='file' />
<img id="myImg" src="#" alt="your image" />

js code:

$(function () {
$(":file").change(function () {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = imageIsLoaded;
        reader.readAsDataURL(this.files[0]);
    }
});
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

Any suggestion appreciated.. [1]: http://jsfiddle.net/vacidesign/ja0tyj0f/

Possible duplicate of [Styling an input type="file" button](http://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — Jordan Running, Apr 11 '17 at 19:40
first you can do, post your code here, not only a fiddle link. — TypedSource, Apr 11 '17 at 19:40

Kumar Nitesh · Answer 1 · 2017-04-11T19:49:03.600

$(function () {
    $(":file").change(function () {
        if (this.files && this.files[0]) {
            var reader = new FileReader();
            reader.onload = imageIsLoaded;
            reader.readAsDataURL(this.files[0]);
        }
    });
});

function imageIsLoaded(e) {
    $('#myImg').attr('src', e.target.result);
};

$("#upload").on('click',function() {
    $("input[type='file']").click();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
input[type='file']{
 display:none;
}
</style>
<div id="upload" class="btn btn-sm btn-success fa fa-cloud-upload"></div>
<input type='file'  />

<img id="myImg"  alt="Uploaded file will appear here" />

Dan Philip Bejoy · Accepted Answer · 2017-04-11T19:47:38.270

You can style a label to show the image and hide the default upload button. Thats the first image I saw and just took it .

$(function() {
  $(":file").change(function() {
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = imageIsLoaded;
      reader.readAsDataURL(this.files[0]);
    }
  });
});

function imageIsLoaded(e) {
  $('#myImg').attr('src', e.target.result);
};

input[type="file"] {
  visibility: hidden;
  height: 0;
  width: 0;
}

input[type="file"]+label {
  display: inline-block;
  margin-right: 20px;
  height: 30px;
  width: 30px;
  background: url("//www.gravatar.com/avatar/9cb3514ed62adf3741d9f511a97e3c0d/?default=&s=80") no-repeat;
  background-size: cover;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="imgUpload" type='file' />
<label for="imgUpload"></label>
<img id="myImg" src="#" alt="your image" />

how to use glyphicon for upload an image insted of using that long input field?

2 Answers2