open input type file on image click

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

here is very abstract steps you should fallow:


here is the initial css class to hide the file upload control, you can avoid this step by invoke the js method below on window.load

Code:

---

.HideMe{display:none;}

---

this is the js method for toggling the upload control visibility

Code:

---

<script>
function ToggleFUpload() {
if(document.getElementById('FileUpload1').style.display == 'none') {
document.getElementById('FileUpload1').style.display ='block';
} else {
document.getElementById('FileUpload1').style.display ='none';
}
}
</script>

---

this is the html markup:

Code:

---

<img src='your image location' onclick='ToggleFUpload()' />

<asp:FileUpload ID="FileUpload1" runat="server" CssClass="HideMe" />

---

Toggling the visibility of the file upload control isn't necessarily my concern. What I need to have happen is for the file dialog box that the control uses to select the file to open. Like by spoofing a click on the attached button, though the button is part of the file upload control, so I do not know how to reference it.

Hey,

The problem that you are going to face here is that the upload control is rendered differently across each browser. Drop an upload control onto the page, and open it in each browser, and you will see what I mean.

How cluttered is your interface exactly? I wouldn't have thought that you would gain much by doing this?!?

Gary

well basically you can't because of security reasons, you CAN do it only with IE

Code:

---

<script>
    function openUploadFileDialogue() {
            document.getElementById('fileupload').click();
}
</script>

---

Code:

---

<div>
        <asp:FileUpload ID="fileupload" runat="server" />
<img src="/Graphics/cart_red.png" name="flake" onclick="openUploadFileDialogue();">
    </div>

---

in other browsers you'll have to get "smart" and use opacity to hide your fileupload control, just google it.

Alright I appreciate the insight guys. I will do it the traditional way.

The interface isn't overly cluttered, I just wanted It to look the same (ish) in edit mode as it does in normal use.

Quote:

---

Originally Posted by DemonMade

Alright I appreciate the insight guys. I will do it the traditional way.

The interface isn't overly cluttered, I just wanted It to look the same (ish) in edit mode as it does in normal use.

---

Ah, ok, I see what you mean.

You might have to make a compromise then, or spend a lot of time getting it to work in all browsers.

Gary