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

Question 1

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?

Question 2

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.

Question 3

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

Question 4

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);
    }
  });
});

Question 5

Eine weitere mögliche Lösung mit JS

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

Question 6

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.

Question 7

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

Question 8

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

Answer 1

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

Answer 2

1

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

Yan Berk

Answer 3

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

gbjbaanb

Answer 4

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

Answer 5

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

Answer 6

3

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

Félix Gagnon-Grenier

Answer 7

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

Answer 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);
    }
  });
});

Answer 9

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

Efferalgan

Answer 10

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

Answer 11

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

Johann Combrink

Answer 12

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.

Answer 13

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

Answer 14

1

Dies wird nur ein Bild erlauben, er will 2 Bilder

Diego

Answer 15

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_

Answer 16

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

Answer 17

@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

Answer 18

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

Answer 19

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

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

Antworten: