Creazione di pulsante multiuso in html

Question

Quando su un telefono non riesco a visualizzare questi due pulsanti perché sono troppo distanti. Voglio renderlo tale dopo aver scelto il file, il pulsante 'scegli file' sarà sostituito dal pulsante di caricamento. È possibile. Cosa dovrei fare?

http://goawaymom.com/buttons.png

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

-Nota non mi importa di metterli su righe separate o fare carattere smaller- ecc

Answer 1

Modo più semplice:

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

Senza Jquery, Solo 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) 
    } 

}); 
}); 

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

Answer 3

Sì, è davvero facile. È possibile ascoltare l'evento onchange dell'input del file e nasconderlo.

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. se vuoi puoi usare lo stesso trucco per mostrare il pulsante "Carica" ​​solo quando viene selezionato un file. In questo caso il codice del pulsante sarà <input id="btn" type="button" value="Upload" style="display:none"/> e nel codice Javascript scriverai btn.style.display="" per mostrare il pulsante.

Answer 4

Posso dire che ci sono molti modi per farlo. Ma in java script nucleo di seguito è l'approccio

(1) Inizialmente impostare lo stile di visualizzazione del pulsante di caricamento a nessuno, al fine di nascondere che

(2) Scrivi onchange gestore di eventi per il tipo di file di input

(3) In quella funzione di gestore se il valore non è nullo, nascondere il file di input applicando lo stile di visualizzazione none e quindi modificare lo stile del pulsante di caricamento su vuoto ('').

Spero che questo approccio funziona