Begrenzen Sie die Größe eines Datei-Uploads (HTML-Eingabeelement)

Ich möchte einfach die Größe einer Datei begrenzen, die ein Benutzer hochladen kann.

Ich dachte maxlength = 20000 = 20k, aber das scheint überhaupt nicht zu funktionieren.

Ich arbeite auf Rails, nicht auf PHP, dachte aber, es wäre viel einfacher, es clientseitig in HTML / CSS oder als letztes Mittel mit jQuery zu tun. Dies ist jedoch so grundlegend, dass es ein HTML-Tag geben muss, das mir fehlt oder das ich nicht kenne.

Ich möchte IE7 +, Chrome, FF3.6 + unterstützen. Ich nehme an, ich könnte bei Bedarf nur IE8 + unterstützen.

Vielen Dank.

Dies ist durchaus möglich. Verwenden Sie Javascript.

Ich benutze jQuery, um das Eingabeelement auszuwählen. Ich habe es mit einem On-Change-Ereignis eingerichtet.

$("#aFile_upload").on("change", function (e) {

    var count=1;
    var files = e.currentTarget.files; // puts all files into an array

    // call them as such; files[0].size will get you the file size of the 0th file
    for (var x in files) {

        var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB

        if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) { 

            if (count > 1) {

                approvedHTML += ", "+files[x].name;
            }
            else {

                approvedHTML += files[x].name;
            }

            count++;
        }
    }
    $("#approvedFiles").val(approvedHTML);

});

Der obige Code speichert alle Dateinamen, die ich für würdig halte, auf der Übermittlungsseite zu bleiben, bevor die Übermittlung tatsächlich erfolgt. Ich füge die "genehmigten" Dateien mit jQuery zum Wert eines Eingabeelements hinzu, sodass ein Formular die Namen der Dateien sendet, die ich speichern möchte. Alle Dateien werden gesendet, jetzt müssen wir sie jedoch auf der Serverseite herausfiltern. Ich habe noch keinen Code dafür geschrieben, aber benutze deine Fantasie. Ich gehe davon aus, dass man dies durch eine for-Schleife erreichen und die vom Eingabefeld gesendeten Namen abgleichen und mit der Variablen $ _FILES (PHP Superglobal, sorry, ich kenne die Ruby-Dateivariable nicht) abgleichen kann.

Mein Punkt ist, dass Sie vor dem Einreichen nach Dateien suchen können. Ich mache das und gebe es dann an den Benutzer aus, bevor er das Formular absendet, um ihn wissen zu lassen, was er auf meine Site hochlädt. Alles, was die Kriterien nicht erfüllt, wird dem Benutzer nicht wieder angezeigt. Daher sollte er wissen, dass zu große Dateien nicht gespeichert werden. Dies sollte in allen Browsern funktionieren, da ich kein FormData-Objekt verwende.

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

Dieses Beispiel sollte gut funktionieren. Ich habe es für ungefähr 2 MB eingerichtet, 1 MB in Bytes ist 1.048.576, sodass Sie es mit dem von Ihnen benötigten Limit multiplizieren können.

Hier ist das jsfiddle-Beispiel für mehr Klarheit:
https://jsfiddle.net/7bjfr/808/

Sie können es nicht clientseitig tun. Sie müssen es auf dem Server tun.

Edit: Diese Antwort ist veraltet!

Zum Zeitpunkt dieser Bearbeitung wird die HTML-Datei-API jetzt in allen gängigen Browsern unterstützt .

Ich würde ein Update mit Lösung bereitstellen, aber @ mark.inman.winning hat es bereits getan .

Beachten Sie, dass Sie die Validierung auf dem Client auch dann auf dem Server durchführen sollten , wenn sie jetzt möglich ist . Alle clientseitigen Validierungen können umgangen werden.

const input = document.getElementById('input')

input.addEventListener('change', (event) => {
  const target = event.target
  	if (target.files && target.files[0]) {

      /*Maximum allowed size in bytes
        5MB Example
        Change first operand(multiplier) for your needs*/
      const maxAllowedSize = 5 * 1024 * 1024;
      if (target.files[0].size > maxAllowedSize) {
      	// Here you can ask your users to load correct file
       	target.value = ''
      }
  }
})

<input type="file" id="input" />

Wenn Sie den Dateityp überprüfen müssen , schreiben Sie unten in die Kommentare und ich werde meine Lösung teilen.

(Spoiler: acceptAttribut ist keine kugelsichere Lösung)

Beispiel für eine Videodatei (HTML + Javascript):

function upload_check()
{
    var upl = document.getElementById("file_id");
    var max = document.getElementById("max_id").value;

    if(upl.files[0].size > max)
    {
       alert("File too big!");
       upl.value = "";
    }
};

<form action="some_script" method="post" enctype="multipart/form-data">
    <input id="max_id" type="hidden" name="MAX_FILE_SIZE" value="250000000" />
    <input onchange="upload_check()" id="file_id" type="file" name="file_name" accept="video/*" />
    <input type="submit" value="Upload"/>
</form>

<script type="text/javascript">
    $(document).ready(function () {

        var uploadField = document.getElementById("file");

        uploadField.onchange = function () {
            if (this.files[0].size > 300000) {
                this.value = "";
                swal({
                    title: 'File is larger than 300 KB !!',
                    text: 'Please Select a file smaller than 300 KB',
                    type: 'error',
                    timer: 4000,
                    onOpen: () => {
                        swal.showLoading()
                        timerInterval = setInterval(() => {
                            swal.getContent().querySelector('strong')
                                .textContent = swal.getTimerLeft()
                        }, 100)
                    },
                    onClose: () => {
                        clearInterval(timerInterval)

                    }
                }).then((result) => {
                    if (
                        // Read more about handling dismissals
                        result.dismiss === swal.DismissReason.timer


                    ) {

                        console.log('I was closed by the timer')
                    }
                });

            };
        };



    });
</script>