Make-Button deaktiviert, wenn Input-Typ-Datei im Bootstrap leer ist

Question

Ich habe Formular, wo der Benutzer eine Datei hochladen kann, aber ich möchte die Upload-Schaltfläche deaktiviert werden, wenn der Input-Typ Datei keine Datei enthält, wie mache ich das?

<form action="/upload" method="post" enctype="multipart/form-data"> 
    <div class="form-inline"> 
     <div class="form-group"> 
      <input type="file" name="fileUploaded"> 
     </div> 
     <button type="submit" class="btn btn-sm btn-primary">Upload file</button> 
    </div> 
</form> 

Answer 1

Sie Attribut deaktiviert die Schaltfläche

<button type="submit" class="btn btn-sm btn-primary" disabled>Upload file</button> 

fügen Sie dann sollten wir beobachten ändert sich mit dem Code die Schaltfläche zu aktivieren, wenn die Eingangsdateityp

jede Datei enthalten

$('input[type=file]').change(function(){ 
    if($('input[type=file]').val()==''){ 
     $('button').attr('disabled',true) 
    } 
    else{ 
     $('button').attr('disabled',false); 
    } 
}) 

Demo hier: https://jsfiddle.net/IA7medd/08eekkbt/

Answer 2

Have a look here.

Ich mag diese Lösung aus dem verlinkten Beitrag:

<input type="file" id="selectedFile" style="display: none;" /> 
 
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />