Lo primero que debes hacer es lanzar el evento clic del input[file] con el metodo click()
al dar clic en el div del diseño bonito. Esto hara que se muestre la ventana de seleccion de archivos. Luego debes de asignarle el evento change(fn)
al input[file]
que se ejecuta cuando el usuario selecciono los archivos de su directorio.
El elemento input[file]
tiene una propiedad files
con la cual puedes obtener el total de elementos seleccionados con la propiedad .length
y asi mostrar cuando archivos el usuario selecciono en el diseño bonito:
$("#file").change(function(){
$("#seleccionar-archivos").text("Diseño bonito " + this.files.length + " archivos cargados");
});
$("#seleccionar-archivos").click(function(){
$("#files").click();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="file" id="seleccionar-archivos" style="background: green;color:white">Diseño bonito</label>
<input id="file" type="file" style="display:none;" multiple>