input type file modified with separate upload button

Question

Maybe my question is a duplicate, but i tried a lot of answers found around here, with no success.

On my jsp page, I have an input type file, but also an upload button, that triggers the uploading. Something like this:

<div id="test_form">
<input type="file" id="file" style = "position:absolute; top:-100px;">
<button id="selectFileButton">Please choose file</button>
</div>
<button id="upload">Upload selected file</button>

And some js:

    $(document).ready(function() {
    $("#selectFileButton").click(function() {
        $("#file").click();
    });
});

When i click on 'Please choose file' button, a new window for selection appears. But when i select the file, everything goes away, so i am now able to hit the actual 'Upload' button at all. Can you help me, please?

Answer 1

What I do is make a div with a custom layout and place an invisible file select above it. This way the user actualy clicks the file upload. If you want to display the name of the selected file you will need some javascript though.

<div style="position: relative; width: 300px; height: 50px;">
    <div class="button" style="position: absolute;">Click me!</div>
    <input type="file" style="float: left; opacity: 0; cursor: pointer;" />
</div>

and some js:

$("input[type=file]").change(function(){
    $(this).siblings("div").eq(0).html($(this).val());
});