Is there a way to use a symbol or glyphicon for uploading an image instead of having to use such a long input field? (Specifically for uploading a profile picture)
I'd like the ability to click on the glyphicon and choose an image from my computer. The current fiddle provided allows for choosing an image, but it requires the use of a lengthy input field.
My goal is to display the glyphicon when hovering over a mouse icon, which in turn hovers over a background image. How can this be achieved?
Below is the code I am currently using:
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 suggestions would be greatly appreciated. [1]: http://jsfiddle.net/vacidesign/ja0tyj0f/