File upload with the file control hidden

Question

I havea form with a file input which is hidden. There will be abutton on click of which, the open file dialogue should pop up and when we select the file, the file should get uploaded to the server. Is this possible ?

Solution 1

Have you tried using Fine Uploader? You can see the demo site here http://fineuploader.com if this is what you need.

Solution 2

If you set the display to none, it won't work in webkit browsers. But you can set the opacity, width and height to zero, and then call the click event when the other button is clicked.

Here is a working example http://jsfiddle.net/jcVL5/

***Edit: I just saw "the file should get uploaded to the server". You will have to explain what server side language you are using.

<input type="file" id="fileUpload" style="opacity:0; height:0px;width:0px;" />
<input type="button" id="btnUpload" value="test Button" />​

<script>
document.getElementById('btnUpload').onclick = function(){
    document.getElementById('fileUpload').click();
};​
</script>

Comments

[Ranjan Sarma]

but the form should get submitted. in IE form cannot be submitted. In webkit it can be done using many ways.