Question

135

input type=file attached to an onclick event

rated 0 times [ 138] [ 3] / answers: 1 / hits: 31973 / 13 Years ago, wed, february 22, 2012, 12:00:00

I have a menu like this:

<ul class=sub>

    <li><a href=#>New</a></li>

    <li><a href=#>Open</a></li>

    <li><a href=#>Save</a></li>

    <li><a href=#>Help</a></li>

</ul>

and I'd like to attach an onclick even to the Open li that would kick off a file open dialog, like input type=file does. I can handle attaching code to the li's onclick event, but I don't know what code to attach.

TIA

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

dylondarrianb

Add To Favorites

Follow

Total Points: 48

Total Questions: 109

Total Answers: 104

Location: Zambia

Member since Thu, Jun 25, 2020

4 Years ago

dylondarrianb questions

1 dotenv is not loading properly

Wed, Jan 19, 22, 00:00, 2 Years ago

1 error NG8002: Can't bind to 'user' since it isn't a known property of 'app-add-edit-box' & Error occurs in the template of component ShowBoxComponent

Wed, May 26, 21, 00:00, 3 Years ago

1 Vue convert image into base64

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to add HTML component to React.js

Wed, Jul 8, 20, 00:00, 4 Years ago

1 What is the types first Flow architecture?

Tue, Apr 7, 20, 00:00, 4 Years ago

View All

answered 13 Years ago aubriea · Accepted Answer

You can add a normal input type=file to the page and style it to be hidden. Something like this:

<input type=file id=theFileInput style=display:none; />

(Only using in-line styling for this example, I recommend separating the style from the markup of course.)

Then you can initiate a click on it in response to a click event on the target element. With jQuery (assuming you can set an id on the li, or otherwise uniquely identify it in the selector in some way) it would be something like:

$('#clickableLiElement').click(function() {

    $('#theFileInput').click();

});

The input type=file is still there and can be interacted with just like any other form element. It's just invisible to the user. But this would launch the Open File dialog and set its value to the element normally, which can be included in the POST to the server normally.