acidzombie24 acidzombie24 - 4 months ago 21
HTML Question

Click div or img/javascript to select file?

Instead of clicking a button I'd like to have a user click on an image or div and have the user be prompt to select a file. How do I do that? I believe I can automatically upload by watching the onchange event and do a form submit. It's how to prompt the user that I'm unsure about

Answer

You need the file input, but you can hide it and use its functionality by triggering its click event. This example shows how to catch the click event of any element and call the file-upload-input's click event:

#actual-file-upload {
  display: none;
}
#facade-file-upload {
  border: 1px solid grey;
  border-radius: 10px;
  padding: 20px 40px;
  display: inline-block;
}
<form action="your_target_page" enctype="multipart/form-data" method="post">
<input id="actual-file-upload" type="file" name="datafile" size="40">
<div id="facade-file-upload"
  onclick="document.getElementById('actual-file-upload').click()">
  click to select file
  </div><br />
<input type="submit" value="Send">
</form>

Comments