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

IE 10 release preview for Windows 7

pre-requisites : windows 7 service pack 1

source : [http://lifehacker.com/5960175/ie-10-release-preview-available-now-for-windows-7?utm_campaign=socialflow_lifehacker_twitter&utm_source=lifehacker_twitter&utm_medium=socialflow]

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));