javascript - HTMLで多目的ボタンを作成する

Question

電話では、これらの 2 つのボタンが離れすぎているため、表示できません。ファイルを選択した後、「ファイルを選択」ボタンがアップロードボタンに置き換えられるようにしたいと思います。これは可能ですか？私は何をしなければなりませんか？

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

-別の行に配置したり、フォントを小さくしたりすることは気にしないことに注意してください-など

score 9 · Accepted Answer

最も簡単な方法:

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

score 0 · Accepted Answer

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

 });
 });

check jQuery - ファイル入力でファイルが選択されているかどうかの検出

score 0 · Accepted Answer

ええ、それは確かに非常に簡単です。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";
};

JSフィドル

PS。必要に応じて、同じトリックを使用して、ファイルが選択されたときにのみ「アップロード」ボタンを表示できます。その場合、ボタンコードは、ボタンを表示するように<input id="btn" type="button" value="Upload" style="display:none"/>記述した Javascript コードにbtn.style.display=""なります。

score -1 · Accepted Answer

I can say that there are multiple ways to do it. But in core java script the below is the approach

(1) Initially set the display style of upload button to none in order to hide that

(2) Write Onchange event handler for input file type

(3) In that handler function if the value is not null then hide the input file by applying display style none and then change the style of upload button to empty('').

Hope this approach works

javascript - HTMLで多目的ボタンを作成する

4 に答える 4

Related

Reference