IE multipart/form-data jspx issue

Question

i have a form in my jspx page that looks like this :

<form class="form-horizontal no-margin uploadform" action="/webapp/post" method="POST" encoding="multipart/form-data" enctype="multipart/form-data">
    <input type="text" name="nomfichact" id="nomfichact" />

    <input id="content" name="content" type="file"
       style="display: none;"
       accept="image/x-png, image/gif, image/jpeg" />
    <input readonly="readonly" class="input-large" type="text" /> 
    <a onclick="$('input[id=content]').click();">Choose file</a>
</form>

As for the server side i use spring mvc to catch the file as follow :

@RequestMapping(method = RequestMethod.POST, consumes = "multipart/form-data", produces = "text/html")
public String create(@Valid UploadedFile mediaUpload, HttpSession session, BindingResult bindingResult, Model uiModel,
        HttpServletRequest httpServletRequest){
              CommonsMultipartFile content = mediaUpload.getContent();
              this.save((FileInputStream)content.getInputStream());
        }

this works perfectly with firefox but using ie8 or ie9 this doesn't work and returns null. i have read about encoding where i should put enctype and encoding tags on the form but that didn't do the trick. Thanks in advance

The uploadedfile class definition contains :

@Transient
private CommonsMultipartFile content;

public CommonsMultipartFile getContent() {
    return content;
}


public void setContent(CommonsMultipartFile content) {
    this.content = content;
}

Answer 1

In case someone has the same issue. the problem was with ie not sending the file in the input having the id of content and style display:none :

<input id="content" name="content" type="file"
   style="display: none;"
   accept="image/x-png, image/gif, image/jpeg" />

I figured out the problem using a software to debug the http requests sent from the browser.

I solved the problem with using a simple input of type file.