How to force a button to activate a file uplaod.

I recently worked on a project that required me to hide the file upload field and replace it with a button that would trigger the file upload.

I know this is a simple thing to do, but sometimes finding a simple method online is a pain. So hide those unnecessary fields and replace them with sweet CSS buttons!

The HTML

<div class="container">
    <a class="blaster button">Choose File</a>
    <input type="file" name="somename" class="lightsaber">
</div>

The jQuery

<script src="http://code.jquery.com/jquery-latest.min.js"type="text/javascript"></script>
    <script>
        jQuery('.blaster').click(function(){
            jQuery('.lightsaber').click();
    });
    </script>

The CSS (For Flavor!)

         input { display: block; visibility: hidden; width: 0; height: 0;}
.button {
    padding: 5px 10px;
    display: inline;
    background: #4888EF;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 1px 1px #13648D;
    -webkit-transition:all .2s ease-in-out; 
    -moz-transition:all .2s ease-in-out; 
    transition:all .2s ease-in-out; 
    border:1px solid #2F5BB7;
    }
.button:hover {
    background-position: 0 -48px;
    border:1px solid #2F5BB7;
    background:#3C78FC;
    }
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }
.container{
    width:120px; height:100px; margin:0 auto;
}