Creating multi purpose button in html

Question

When on a phone I'm unable to view these two buttons as they are too far apart. I want to make it so after you choose the file, the 'choose file' button would be replaced by the upload button. Is this possible. What would i have to do?

http://goawaymom.com/buttons.png

my html -

<form method="post" action="" enctype="multipart/form-data" name="form1">
   <input   name="file" type="file"class="box"/>          
   <input type="submit" id="mybut" value="Upload" name="Submit"/>
</form>

-Note I don't care to put them on separate lines or make font smaller- etc

Answer 1

Simplest Way:

    <form method="post" action="" enctype="multipart/form-data" name="form1">
        <input   name="file" type="file" onchange="if($(this).val().length){$(this).hide().next().show()}" class="box"/>         
        <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
    </form>     

Without Jquery, Only JavaScript

    <form method="post" action="" enctype="multipart/form-data" name="form1">
        <input   name="file" type="file" onchange="this.nextElementSibling.style.display = 'block'; this.style.display = 'none';" class="box"/>         
        <input type="submit" id="mybut" value="Upload" style="display:none;" name="Submit"/>
    </form>