I am using <s:fileupload> tag in a page.

And i want to change the look of it,so tried it this way:(before this, file upload correctly, everything works fine.)

XHTML:

...

<javascript>

     function clickFileUpload() {

          document.getElementById('submitForm:idCsvFile').click();

     }

     function getFilePath() {

          document.getElementById('idCsvPath').value = document.getElementById('submitForm:idCsvFile').value;

     }

</javascript>

        ...

<h:form name="submitForm" id="submitForm">

     <s:fileupload data="#{webDto.fileData}" filename="#{webDto.fileData}" style="visibility:none" id="idCsvFile" />

     <h:commandBUtton type="button" value="Choose File" onclick="clickFileUpload()" />

     <div id="idFilePath"></div>

     <h:commandBUtton type="submit" action="#{testAction.getUploadFile}" value="Submit IT" />

</h:form>

Now when i click "Choose File" button, i can choose the upload file correctly.

But when i click "Submit IT" button and debug the testAction, i found the fileData and file name are Null.

So,i made the button <s:fileupload> visible, then i found that after i choose the file to upload, the FilePath in DIV was changed, however nothing was changed in <s:fileupload> area.

I have tried all day long but still trapped here, anyone please help me.