Question

I have a simple profile page which has image and some information. This profile page is filled up with the information provided during registration.

What i want is to allow registered users to click on their upload image on their profile page and be able to replace with a new one.

I know how to handle this from the database side.

I need help on the html or the front end side. In the sense that how do i make image clickable to open the upload image window.

Answer 1

I think the simplest solution to this, is to place the actual file upload element in the offset of the page and then “forward trigger” the click to it when the user clicks on the profile image.

HTML:

<input id="profile-image-upload" class="hidden" type="file">
<div id="profile-image">click here to change profile image</div>

JS:

$('#profile-image').on('click', function() {
    $('#profile-image-upload').click();
});

See my Fiddle: http://jsfiddle.net/L8xCb/3/