Überprüfung der Dateigröße beim Hochladen mit JavaScript

Question

Gibt es eine Möglichkeit zu überprüfen Dateigröße bevor ich sie mit JavaScript hochlade?

Answer 1

Ja können Sie die Datei-API für diese.

Hier ist ein vollständiges Beispiel (siehe Kommentare):

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

---

Ein wenig Off-Topic, aber: Beachten Sie, dass die client-seitige Validierung kein Ersatz für die serverseitige Validierung. Die clientseitige Validierung dient lediglich dazu, die Benutzerfreundlichkeit zu erhöhen. Wenn Sie z. B. das Hochladen einer Datei von mehr als 5 MB nicht zulassen, könnten Sie die clientseitige Validierung verwenden, um zu prüfen, ob die vom Benutzer ausgewählte Datei nicht größer als 5 MB ist, und ihm eine nette, freundliche Nachricht zukommen lassen, wenn dies der Fall ist (damit er nicht die ganze Zeit mit dem Hochladen verbringt, nur um das Ergebnis auf dem Server weggeworfen zu bekommen), aber Sie müssen auch dieses Limit auf dem Server durchsetzen, da alle clientseitigen Limits (und andere Validierungen) umgangen werden können.

Answer 2

Jquery verwenden:

$('#image-file').on('change', function() {
  console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">

  Upload image:
  <input id="image-file" type="file" name="file" />
  <input type="submit" value="Upload" />

</form>

Answer 3

Funktioniert für dynamische und statische Dateielemente

Javascript Einzige Lösung

function validateSize(input) {
  const fileSize = input.files[0].size / 1024 / 1024; // in MiB
  if (fileSize > 2) {
    alert('File size exceeds 2 MiB');
    // $(file).val(''); //for clearing with Jquery
  } else {
    // Proceed further
  }
}

<input onchange="validateSize(this)" type="file">

Answer 4

Das ist ganz einfach.

const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

if (oFile.size > 2097152) // 2 MiB for bytes.
{
  alert("File size must under 2MiB!");
  return;
}

Answer 5

Wenn Sie jQuery Validation verwenden, könnten Sie etwas wie dieses schreiben:

$.validator.addMethod(
  "maxfilesize",
  function (value, element) {
    if (this.optional(element) || ! element.files || ! element.files[0]) {
      return true;
    } else {
      return element.files[0].size <= 1024 * 1024 * 2;
    }
  },
  'The file size can not exceed 2MiB.'
);