it-swarm.com.de

Validierung der Größe der JavaScript-Datei

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

212
ArK

Ja, es gibt eine neue Funktion des W3C, die von einigen modernen Browsern unterstützt wird, die File API . Es kann für diesen Zweck verwendet werden, und es ist leicht zu testen, ob es unterstützt wird, und wenn nötig, auf einen anderen Mechanismus zurückzugreifen, falls 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 es ist in Aktion. Versuchen Sie das mit einer aktuellen Version von Chrome oder Firefox.


Etwas außerhalb 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 bieten. Wenn Sie beispielsweise das Hochladen einer Datei mit mehr als 5 MB nicht zulassen, können Sie mithilfe der clientseitigen Validierung prüfen, ob die vom Benutzer ausgewählte Datei nicht größer als 5 MB ist, und ihnen eine Nice-Friendly-Meldung geben, falls dies der Fall ist (Sie verbringen also nicht die ganze Zeit mit dem Hochladen, um das Ergebnis auf dem Server wegzuwerfen), aber Sie müssen auch dieses Limit auf dem Server durchsetzen, da alle clientseitigen Beschränkungen (und andere Validierungen) dies können umgangen werden.

279
T.J. Crowder

Jquery verwenden:

<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>
104
Ben

Funktioniert für dynamische und statische Dateielemente

Javascript Nur 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">
48
Arun Prasad E S

Nein Ja, mit 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 einen Flash-basierten Uploader wie SWFUpload oder Uploadify verwenden.

Die SWFUpload Features Demo zeigt, wie die Einstellung file_size_limit funktioniert.

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

13
Pekka 웃

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

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.'
);
9

Ich verwende eine 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 und entsprechend geändert auf meine Bedürfnisse 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

3
Jose Gaspar

Obwohl die Frage beantwortet wurde, wollte ich meine Antwort posten. Kann für zukünftige Betrachter 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");
    }
  }
3
Lemon Kazi

Das in diesem Thread bereitgestellte JQuery-Beispiel war extrem veraltet, und Google war überhaupt nicht hilfreich. Daher hier 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>
2
nodws

Sie können diesen feinen Uploader ausprobieren.

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

1
anson

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

0
kibus90