Tworzenie przycisku wielofunkcyjnego w html

Question

Podczas korzystania z telefonu nie mogę wyświetlić tych dwóch przycisków, ponieważ są one zbyt oddalone od siebie. Chcę, aby tak było po wybraniu pliku, przycisk "wybierz plik" zostałby zastąpiony przyciskiem przesyłania. Czy to możliwe. Co musiałbym zrobić?

http://goawaymom.com/buttons.png

mój 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 Nie dbam, aby umieścić je na oddzielnych liniach lub dokonać czcionki smaller- etc

Answer 1

najprostszy sposób:

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

Bez Jquery tylko 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) 
    } 

}); 
}); 

czek jQuery - Detecting if a file has been selected in the file input

Answer 3

Tak, to naprawdę bardzo łatwe. Możesz wysłuchać zdarzenia onchange wejściowego pliku i ukryć je.

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. jeśli chcesz, możesz użyć tej samej sztuczki, aby wyświetlić przycisk "Prześlij" tylko wtedy, gdy zostanie wybrany plik. W takim przypadku kod przycisku będzie wynosił <input id="btn" type="button" value="Upload" style="display:none"/>, aw kodzie Javascript wpisujesz btn.style.display="", aby wyświetlić przycisk.

Answer 4

Mogę powiedzieć, że jest na to wiele sposobów. Ale w podstawowej skryptu Java poniżej jest podejście

(1) Początkowo ustawić styl wyświetlania przycisku Prześlij do nikogo, aby ukryć, że

(2) Napisz onChange obsługi zdarzeń dla typu pliku wejściowego

(3) W tej funkcji obsługi, jeśli wartość nie jest pusta, ukryj plik wejściowy, stosując styl wyświetlania none, a następnie zmień styl przycisku wysyłania na pusty ("').

Nadzieja to podejście działa