Wie submit-button deaktivieren, bis die Datei ausgewählt ist

Ich habe eine HTML-Datei-upload-Seite und ich brauche die Schaltfläche "senden" deaktiviert werden, bis eine Datei ausgewählt ist. Dann den submit-button wird aktiviert und der Benutzer kann hochladen. Ich nehme an, ich kann unter Verwendung der jQuery-code zur Abfrage der Datei-upload-Feld Wert, um zu sehen, ob eine Datei ausgewählt wurde, hochladen. Und ich nehme an, ich kann schauen, dass sobald der Fokus nicht mehr auf dem Datei-upload-Feld. Meine Sorge ist, dass einige Browser möglicherweise handeln lustig, mit diesem und dann meinen Benutzer können nicht alle Dateien hochlädt.

Gibt es einen sicheren Weg, dies zu tun, vorzugsweise mit jQuery, wo ich nicht in Gefahr, einige Nutzer nicht in der Lage zu laden?

InformationsquelleAutor at. | 2010-12-12
  1. 5

    Diese jQuery arbeiten sollte, und ist gebunden an den file-input ist change() Veranstaltung. Dieser code wird auch gilt die disabled - Attribut so, in dem Fall hat der Benutzer JavaScript deaktiviert, es sollte nicht verhindern, dass das Formular verwendet wird:

    $(document).ready(
    function(){
        $('input:submit').attr('disabled',true);
        $('input:file').change(
            function(){
                if ($(this).val()){
                    $('input:submit').removeAttr('disabled'); 
                }
                else {
                    $('input:submit').attr('disabled',true);
                }
            });
    });

    JS Fiddle demo.

    • Dieses sieht wie es funktionieren sollte. Aber ich bin immer noch ein bisschen Angst von browser-Probleme, die einige Benutzer nicht hochladen, denke ich nur noch eine Gründliche Prüfung. Es wurde JavaScript deaktiviert ich war besorgt, es war JavaScript Macken ich war besorgt über.
    InformationsquelleAutor David Thomas
  2. 5

    Einen einfacheren Weg, um überprüfen Sie die Datei-Feld, wenn der Anwender das Formular absendet... dass Weise werden Sie nicht haben zu suchen, für die form ändert.

    $(function() {
   $('form').submit(function() {
      if(!$("form input[type=file]").val()) {
         alert('You must select a file!');
         return false;
      }
   });
});

    Dieser code ist Unobtrusive JavaScript und es nicht Durcheinander auf dem Formular, wenn der Benutzer nicht unterstützt JS.

    • Dies könnte "unauffällig" im Sinne der Wikipedia-Seite, aber das werfen einer Sperrung alert-popup in das Gesicht des Benutzers ist sehr aufdringlich.
    • Und, meiner Meinung nach, und erlaubt dem Benutzer, zu versuchen und senden Sie das Formular vor dem Einreichen Bedingungen erfüllt sind, ist bestenfalls frustrierend.
    InformationsquelleAutor Mickel
  3. 0

    David Thomas-code für die Schaltflächen-ID:

    <script type="text/javascript">
    $(document).ready(function () {
        $('#<%=btInsert.ClientID %>').attr('disabled', true);
        $('input:file').change(
            function () {
                if ($(this).val()) {
                    $('#<%=btInsert.ClientID %>').removeAttr('disabled');
                }
                else {
                    $('#<%=btInsert.ClientID %>').attr('disabled', true);
                }
            });
    });
</script>
    InformationsquelleAutor Chưa biết
Schreibe einen Kommentar