I wanted to make a simple file uploader where I could click one button, choose a file, and it would begin to upload. The trick is that I wanted to avoid the ugly "Choose File" button and use a custom button. After toying with a few different methods, I figured out that the following is the best way to go about this, as it works on IE 7+ and all other major browsers. The
<label> tag can be styled as a button to fit in to any application. Without further ado, here it is.
<form> <label for="input">Click Me to Upload</label> <input type="file" id="input" style="display: none" onchange="this.parentNode.submit()"/> </form>