Überprüfung der Größe der Upload-Größe von JavaScript-Dateien

254

Gibt es eine Möglichkeit, die Dateigröße vor dem Hochladen mit JavaScript zu überprüfen ?

javascript validation file-upload Arche
quelle

327

Ja , es gibt eine neue Funktion aus dem W3C, die von einigen modernen Browsern unterstützt wird, die Datei-API . Es kann für diesen Zweck verwendet werden, und es ist einfach zu testen, ob es unterstützt wird, und (falls erforderlich) auf einen anderen Mechanismus zurückzugreifen, wenn dies nicht der Fall ist.

Hier ist ein vollständiges Beispiel:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (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) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

Und hier ist es in Aktion. Versuchen Sie dies mit einer aktuellen Version von Chrome oder Firefox.

Etwas abseits des Themas, aber: Beachten Sie, dass die clientseitige Validierung kein Ersatz für die serverseitige Validierung ist. Die clientseitige Validierung dient lediglich dazu, eine bessere Benutzererfahrung zu ermöglichen. Wenn Sie beispielsweise das Hochladen einer Datei mit mehr als 5 MB nicht zulassen, können Sie mithilfe der clientseitigen Überprüfung überprüfen, ob die vom Benutzer ausgewählte Datei nicht größer als 5 MB ist, und ihnen gegebenenfalls eine nette, freundliche Nachricht senden (so dass sie nicht verbringen die ganze Zeit das Hochladen nur das Ergebnis erhalten auf dem Server weggeworfen), aber Sie müssen auch diese Grenze auf dem Server durchzusetzen, da alle clientseitigen Grenzen (und andere Validierungen) umgangen werden kann.

TJ Crowder
quelle

12

+1 für "Alle clientseitigen Limits (und andere Validierungen) können umgangen werden". Dies gilt ebenso für "native" / "kompilierte" Datenbank-Frontend-Anwendungen. Und fügen Sie die Datenbankzugriffskennwörter nicht in Ihren kompilierten Code ein, auch nicht "verschlüsselt" (mit einem Kennwort, das auch im Code enthalten ist - habe dies erst kürzlich gesehen).

Masterxilo

117

Verwenden von jquery:

<form action="upload" enctype="multipart/form-data" method="post">

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

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>

Ben
quelle

2

@ipd, gibt es eine Chance auf einen IE8-Fallback? (Ich hasse mich dafür, IE überhaupt zu erwähnen)

Asher

2

Dieser funktioniert Gitter, aber funktioniert es auch für mehrere Dateien?

Ingus

4

Es sollte sein, MiBwenn Sie zur Basis von berechnen 1024.

Slartidan

69

Funktioniert für dynamische und statische Dateielemente

Nur Javascript- Lösung

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }

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

Erweitern Sie das Snippet

Arun Prasad ES
quelle

1

Gute Antwort. Ich hatte das gleiche Problem, aber Ihre Lösung hat bei mir funktioniert :)

Dipankar Das

1

NB OP hat den Beitrag so bearbeitet, dass der Code jetzt korrekt ist, unter Verwendung der sizeEigenschaft

UsAndRufus

1

Vielen Dank für die Antwort. Ich habe fast das Gleiche getan, aber mit einer Änderung. $(obj).files[0].size/1024/1024; Aber änderte es zuobj.files[0].size/1024/1024;

Shakir Baba

Gibt es eine Möglichkeit, dies für die Validierung von Breite und Höhe zu erweitern? (Belassen einer "Datei" als Ausgangspunkt und Annahme, dass sie sich auf ein Bild bezieht)

jlmontesdeoca

@jlmontesdeoca Ich denke, Sie könnten die Datei mit Hilfe der Leinwand lesen und ihre Höhe und Breite hier selbst erhalten.

Arun Prasad ES

14

~~Nein~~ Ja, Verwenden der Datei-API in neueren Browsern. Einzelheiten finden Sie in der Antwort von TJ.

Wenn Sie auch ältere Browser unterstützen müssen, müssen Sie dazu einen Flash-basierten Uploader wie SWFUpload oder Uploadify verwenden.

Die SWFUpload Features Demo zeigt, wie die file_size_limitEinstellung funktioniert.

Beachten Sie, dass dies (offensichtlich) Flash benötigt und sich die Funktionsweise ein wenig von normalen Upload-Formularen unterscheidet.

Pekka
quelle

14

Es ist ziemlich einfach.

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

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

Hasan Thunfisch Oruç
quelle

Beste Antwort. süß und einfach ... :)

A. Sinha

12

Wenn Sie jQuery Validation verwenden, können Sie Folgendes 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 2MB.'
);

Nikolaos Georgiou
quelle

4

Ich habe so etwas gemacht:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

Erweitern Sie das Snippet

kibus90
quelle

Dies sagt Javascript, JQuery ist nicht in den Tags

Hello234

3

Ich verwende eine Haupt-Javascript-Funktion, die ich auf der Mozilla Developer Network-Website https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications gefunden habe , zusammen mit einer anderen Funktion mit AJAX, die ich gemäß meinen Anforderungen geändert habe. Es erhält eine Dokumentelement-ID bezüglich der Stelle in meinem HTML-Code, an der ich die Dateigröße schreiben möchte.

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

Prost

Jose Gaspar
quelle

3

Obwohl die Frage beantwortet ist, wollte ich meine Antwort posten. Könnte für zukünftige Zuschauer nützlich sein. Sie können es wie im folgenden Code verwenden.

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents.substr(1, contents.indexOf("n"))
        ); 
        if(f.size > 5242880) {
               alert('File size Greater then 5MB!');
                }


      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

Zitrone Kazi
quelle

3

Das in diesem Thread bereitgestellte JQuery-Beispiel war extrem veraltet, und Google war überhaupt nicht hilfreich. Hier ist meine Überarbeitung:

 <script type="text/javascript">
        $('#image-file').on('change', function() {
            console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
        });
    </script>

nickt
quelle

1

Sie können diesen Fineuploader ausprobieren

Es funktioniert gut unter IE6 (und höher), Chrome oder Firefox

Anson
quelle

3

Fine Uploader kann die Dateigröße in IE9 und älter nicht überprüfen, da die Datei-API nicht unterstützt wird. IE10 ist die erste Version von Internet Explorer, die die Datei-API unterstützt.

Ray Nicholus

-2

Wenn Sie den Ie-Dokumentmodus auf "Standards" setzen, können Sie die einfache Javascript-Methode "Größe" verwenden, um die Größe der hochgeladenen Datei zu ermitteln.

Stellen Sie den Ie 'Document Mode' auf 'Standards' ein:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Verwenden Sie dann die Javascript-Methode 'size', um die Größe der hochgeladenen Datei zu ermitteln:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

Für mich geht das.

Lilla
quelle

1

Dies funktioniert in IE9 oder älter nicht, unabhängig davon, welche Meta-Tags Sie hinzufügen.

Ray Nicholus

Überprüfung der Größe der Upload-Größe von JavaScript-Dateien

Antworten: