I am trying to streamline the look of my site and I was wondering if there was a way to use the onclick of an image to open up a <input type="file.../>? I want the input to be invisible so it doesn't add clutter to the interface.

Here is ultimatly the flow I would ideally have...

Image click -> Javascript calls input open. User clicks "open" in the dialog, Input calls some Javascript that calls the click event of the inviable "upload" button.

Boom. User clicks image, selects a new one, and I have it automatically on my server without the need for two more buttons...

Anyone know if these types of events/functions exists and if so what they are called and how to capture them? Or should I stop making this over complicated and use the method that I know works?

Dan