Stack up attached filename in a html input

Question

How could we get to show the attached filename to stack up above the "Choose File" input button clicking on which will open the file browse window. The browser (firefox and chrome) defaults to showing the filename next to the input button (see pic below).

<div class="blaa">
<a class="delete-icon" href="#"><span /></a><input name="file[0]" type="file" />
</div>

The a- class is for the delete button and trying several alignment parameters in the input tag doesn't really help as it keeps moving the input button as well.

Answer 1

why not simulating a click on a hidden file input. mask by whatever you want for example

<div id="filenames" style="width:200px;height:200px;border:1px solid black;overflow:scroll;"></div>
<button onclick="document.getElementById('file').click ();">LoadFile</button>
<input type="file" id="file" style="display:none" onchange="var filediv=document.getElementById('filenames').appendChild (document.createElement ('p'));filediv.innerHTML=this.value;" />