So begrenzen Sie die maximale Anzahl von Dateien, die bei Verwendung mehrerer Dateieingaben ausgewählt wurden

72

Bei der Verwendung <input type="file" multiple>kann der Benutzer mehrere Dateien auswählen.

Wie legt man ein Limit für die Anzahl der Dateien fest, zum Beispiel zwei?

html file

— rjmcb
quelle

1

Dies könnte hilfreich sein: stackoverflow.com/questions/9813556/…

— Yan Berk

Mögliches Duplikat von Count und Limit der Anzahl der hochgeladenen Dateien (HTML-Dateieingabe)

— gbjbaanb

68

Sie können eine clientseitige jQuery-Validierung ausführen, um Folgendes zu überprüfen:

$(function(){
    $("input[type='submit']").click(function(){
        var $fileUpload = $("input[type='file']");
        if (parseInt($fileUpload.get(0).files.length)>2){
         alert("You can only upload a maximum of 2 files");
        }
    });    
});

http://jsfiddle.net/Curt/u4NuH/

Denken Sie jedoch daran, dies auch auf der Serverseite zu überprüfen, da die clientseitige Validierung ganz einfach umgangen werden kann.

— Curt
quelle

11

Ich verstehe nicht wirklich, warum dieser Code als richtige Antwort markiert ist. Es überprüft zwar die Anzahl der hochgeladenen Dateien, deaktiviert jedoch nicht das Senden von Formularen. jsfiddle-Code hat kein Formular-Tag mit definiertem Aktionsattribut und es scheint, als würde es gut funktionieren. Wenn wir es jedoch durch Hinzufügen eines Formular-Tags erweitern, wird das Formular trotzdem gesendet, sobald eine Warnung angezeigt wird.

— David

3

@ David Meistens, weil die Leute überall Sachen kopieren und einfügen. Das und es ist 6 Jahre her.

— Félix Gagnon-Grenier

14

Bei Änderung der Eingabespur, wie viele Dateien ausgewählt sind:

$("#image").on("change", function() {
    if ($("#image")[0].files.length > 2) {
        alert("You can select only 2 images");
    } else {
        $("#imageUploadForm").submit();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<strong>On change of the input track how many files are selected:</strong>
<input name="image[]" id="image" type="file"  multiple="multiple" accept="image/jpg, image/jpeg" >

Erweitern Sie das Snippet

— Kristian Antov
quelle

8

Dies sollte funktionieren und Ihr Formular vor dem Senden schützen, wenn die Anzahl der Dateien größer als max_file_number ist.

$(function() {

  var // Define maximum number of files.
      max_file_number = 3,
      // Define your form id or class or just tag.
      $form = $('form'), 
      // Define your upload field class or id or tag.
      $file_upload = $('#image_upload', $form), 
      // Define your submit class or id or tag.
      $button = $('.submit', $form); 

  // Disable submit button on page ready.
  $button.prop('disabled', 'disabled');

  $file_upload.on('change', function () {
    var number_of_images = $(this)[0].files.length;
    if (number_of_images > max_file_number) {
      alert(`You can upload maximum ${max_file_number} files.`);
      $(this).val('');
      $button.prop('disabled', 'disabled');
    } else {
      $button.prop('disabled', false);
    }
  });
});

— David
quelle

Die einzig einfache Lösung dieser ganzen Frage. Genial!

— Efferalgan

4

Eine weitere mögliche Lösung mit JS

function onSelect(e) {
    if (e.files.length > 5) {
        alert("Only 5 files accepted.");
        e.preventDefault();
    }
}

— Enrique
quelle

on chrome onselect löst die Methode nicht aus. onchange wird zwar ausgelöst, verhindert jedoch nicht die Standardeinstellung.

— Johann Combrink

3

Sie sollten auch in Betracht ziehen, Bibliotheken zu verwenden, um dies zu tun: Sie ermöglichen Einschränkungen und vieles mehr:

FineUploader . Demo mit validation.itemLimitab 5.16.2:

var restrictedUploader = new qq.FineUploader({
    validation: {
        itemLimit: 3,
    }
});

Das jQuery File Upload Plugin von bluimp . Verbrauch: jquery Datei laden Anzahl von Dateien beschränken Verwendung maxNumberOfFilesals von v9.22.0:
```
$('#fileuploadbasic').fileupload({
  maxNumberOfFiles: 6
});
```

Sie sind auch unter https://cdnjs.com/ verfügbar.

— Ciro Santilli 郝海东冠状病六四事件法轮功
quelle

-3

Verwenden Sie <input type=file>stattdessen zwei Elemente ohne das multipleAttribut.

— Jukka K. Korpela
quelle

1

Dies wird nur ein Bild erlauben, er will 2 Bilder

— Diego

4

Nein, dies ermöglicht zwei separate Dateilistenobjekte und wurde konsequent als DIE Methode zum Hochladen mehrerer Dateien und zum Begrenzen ihrer Anzahl verwendet - vor 15 Jahren

— me_

Wenn die Anforderung wirklich nur "zwei verschiedene einzelne Eingänge haben" ist, dann ist dies tatsächlich die beste Antwort @Diego. Die Frage ist leider so unklar, dass wir sie nicht wirklich sagen können.

— Félix Gagnon-Grenier

@me_ Ich bin wirklich neugierig, was die Lösung jetzt ist. Hoffentlich sprechen Sie dort nicht über diesen jQuery-Cluster. Das war vor sieben Jahren total radikal.

— Félix Gagnon-Grenier

@ Félix Gagnon-Grenier das multiple Attribut existierte erst in HTML 5 ... unabhängig von der Verwendung einer Bibliothek oder einfach nur Javascript muss die Anzahl der Dateien nach Auswahl der Dateien überprüft werden. Ich würde sagen, die Lösung besteht darin, dem Benutzer nicht mehr als eine bestimmte Anzahl von Dateien mitzuteilen und dann Dateityp und -nummer zu überprüfen, wenn das Popup geschlossen wird. Lehnen Sie das Dateiobjekt ab, wenn es die angegebene Anzahl überschreitet, und starten Sie erneut. Aber nein, dies ist nicht die beste Lösung - Interms von UI allein ist viel langsamer ... wir haben jetzt das Multiple-Attribut, verwenden Sie es.

— me_

-5

Wenn Sie PHP wollen, können Sie das Array zählen und einfach eine if-Anweisung wie machen

if((int)count($_FILES['i_dont_know_whats_coming_next'] > 2)
      echo "error message";

— MadalinJUPANU
quelle