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

Answer 2

<script type="text/javascript">
 $(function() {
 $("input:file").change(function (){
   var fileName = $(this).val();
   if(fileName){
      remove chose file button and show upload button(visible property)
    }

 });
 });

检查jQuery - 检测文件输入中是否已选择文件

Answer 3

是的，这确实很容易。您可以侦听onchange文件输入的事件并将其隐藏。

HTML：

<input name="inpt" type="file"/>
<input type="button" value="Upload"/>

Javascript：

//this event is fired when the file is chosen (not when user presses the cancel button)
inpt.onchange = function(e) {
  //setting display to "none" hides an element 
  inpt.style.display="none";
};

JSfiddle

PS。如果您愿意，您可以使用相同的技巧仅在选择文件时显示“上传”按钮。在这种情况下，按钮代码将<input id="btn" type="button" value="Upload" style="display:none"/>在您编写btn.style.display=""的用于显示按钮的 Javascript 代码中。

Answer 4

我可以说有多种方法可以做到这一点。但在核心java脚本中，下面是方法

(1) 最初将上传按钮的显示样式设置为none，以便隐藏该按钮

(2) 为输入文件类型编写 Onchange 事件处理程序

(3) 在该处理函数中，如果值不为空，则通过应用显示样式无隐藏输入文件，然后将上传按钮的样式更改为空（''）。

希望这种方法有效