Making the file input to appear as a button

The file input was a bit of hectic element when it comes to styling. Even though I applied css styles the element was appeared in different ways in different browsers. Finally I came up with this solution when I was developing the HTML5 application with the use of jquery mobile css styles & javascript.

<input type = "button" value = "Choose files" onclick ="javascript:document.getElementById('file').click();">
<input type="file" name="file" id="file" style='visibility: hidden;' name="img" onchange="fileSelected();"/>

fileuploadbutton

File Input resetting function

I have spent sometime to get the file input element reset correctly while I was developing a HTML5 application. I have found several ways of doing it while I was researching, but most of them were not worked as I expect. The below mentioned piece of jquery code worked fine in several desktop as well as mobile browsers. So I thought of sharing it.

works with Chrome, FireFox, Opera ,Safari and IE10 and above

$("#yourfileinput").val("");

works with below IE10

$("#yourfileinput").replaceWith($("#yourfileinput").clone(true));