Como forçar um botão para ativar um uplaod de arquivo.

Recentemente, trabalhei em um projeto que exigia que eu ocultasse o campo de upload de arquivo e o substituísse por um botão que acionaria o upload de arquivo.

Eu sei que isso é uma coisa simples de fazer, mas às vezes encontrar um método simples online é uma dor. Portanto, oculte esses campos desnecessários e substitua-os por botões CSS atraentes!

O HTML

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

O jQuery

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

O CSS (para sabor!)

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