Para este tipo de situação, na verdade, este campo (file) é oculto, sendo acionado o evento `change` para preenchimento dos demais componentes, que vai exibir o nome do arquivo ou até a ação do upload. 

[Exemplo][2]:

<!-- begin snippet: js hide: false console: true -->

<!-- language: lang-js -->

    /*
    Using the file input itself to select a file works fine
    */
    $('input[name=file]').change(function() {
       alert($(this).val()); 
    });


    /*
    However, using another element to trigger the file selector 
    does not cause the "change" function to be triggered.
    */
    $('a').click(function() {
        $('input[name=file]').click();
    });

<!-- language: lang-css -->

    a {background-color: yellow}

<!-- language: lang-html -->

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <input name="file" type="file" />
    <a>Trigger upload externally</a>

<!-- end snippet -->

Existe uns exemplos muito legais [AQUI][1] (por **tympanus.net**)


  [1]: http://tympanus.net/Tutorials/CustomFileInputs/
  [2]: http://jsfiddle.net/rudylattae/7wR2L/8/