在html中创建多用途按钮

Question

在手机上我无法查看这两个按钮,因为它们相距太远.我想在你选择文件后这样做,'选择文件'按钮将被上传按钮取代.这可能吗.我该怎么办？

http://goawaymom.com/buttons.png

我的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>

- 注意我不在乎将它们放在单独的行上或使字体变小等

Answer 1

最简单的方法:

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

没有Jquery,只有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>