I'm trying to get my image onclick to open a file uploader but nothing is working.

html:

    <a href="#">
  <figure class="profile-picture" id="profile-picture">
  </figure>
  </a>

css:

figure.profile-picture {
  background-position: center center;
  background-image: url(/img/QNdefualt.jpg);
  background-size: cover;
  border: 5px #efefef solid;
  border-radius: 50%;
  bottom: -50px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px gba(0,0,0,0.3);
  height: 148px;
  left: 150px;
  position: absolute;
  width: 148px;
  z-index: 3;
}   
.profile-picture:hover {
   background-image: url(/img/defualt-hover.png);
   background-size: cover;
}

I've tried onclicks but I keep getting errors. Please help.

I'm trying to get my image onclick to open a file uploader but nothing is working.

html:

    <a href="#">
  <figure class="profile-picture" id="profile-picture">
  </figure>
  </a>

css:

figure.profile-picture {
  background-position: center center;
  background-image: url(/img/QNdefualt.jpg);
  background-size: cover;
  border: 5px #efefef solid;
  border-radius: 50%;
  bottom: -50px;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2), 1px 1px 4px gba(0,0,0,0.3);
  height: 148px;
  left: 150px;
  position: absolute;
  width: 148px;
  z-index: 3;
}   
.profile-picture:hover {
   background-image: url(/img/defualt-hover.png);
   background-size: cover;
}

I've tried onclicks but I keep getting errors. Please help.

• javascript
• html

Share Improve this question Follow edited Jan 8, 2017 at 10:43 RBT 26k2424 gold badges175175 silver badges260260 bronze badges asked Jan 8, 2017 at 2:43 Ethan ThompsonEthan Thompson 4511 silver badge22 bronze badges 3

• Look here: stackoverflow./questions/11412284/… – Glen Pierce Commented Jan 8, 2017 at 2:51
• 1 Where is your onclick code? Also the browser needs an input element of type file to open a file upload. – Alex Terry Commented Jan 8, 2017 at 2:51
• Yes ik and I deleted it becuase it was not working I was trying to use getElementById – Ethan Thompson Commented Jan 8, 2017 at 3:21

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You will need to add an input element with type=file. It does not has to be visible. Listen for click events on your image, and trigger a .click() on the hidden input element.

Here is an example.

var imgBtn = document.querySelector('img');
var fileInp = document.querySelector('[type="file"]');

imgBtn.addEventListener('click', function() {
  fileInp.click();
})

input[type="file"] {
  display: none;
}

img {
  cursor: pointer;
}

<input type="file" />
<img src="http://placehold.it/200x200/2980b9/FFF?text=Click Me" alt="">