Strange behaviour with modified input type="file"

Question

Following this thread, I tried to upload a file on the server. If I use a simple form like this:



<form action="/site/subscribers_import" method="post" enctype="multipart/form-data">
    <input type="file" name="file" />
    <input type="submit" />
</form>

everything goes well, but if I try to modify the form, like this:



<form action="/site/subscribers_import" method="post" enctype="multipart/form-data" >

    <input type="submit" value='${importLabel}' style="float: right;" />

    <div id="chooseFileBttn" style="width:3em; height: 2em; cursor:pointer; float: right;" onclick="getFile()">

    <img src="/site/images/import.png" title="${importUsers}" height="20" width="30" style="padding-right: 10px; float: right;"/>

    </div>

    <div style='height: 0px;width:0px; overflow:hidden;'>
        <input id="upfile" type="file"/>
    </div>

</form>

<script>
        function getFile(){
            document.getElementById("upfile").click();
        }
</script>

I don't get anything in the servlet. Does anyone have any idea why that? Thanks!

score 1 · Accepted Answer · answered Mar 23 '12 at 08:58

Your working input:

<!-- presents a name attribute -->
<input type="file" name="file" />

Your not working input:

<!-- does not present a name attribute, but an id instead -->
<input id="upfile" type="file"/>

Your input need a name, which will be used as the parameter key, and thus recovered at the servlet.

Strange behaviour with modified input type="file"

1 Answers1