Walidacja rozmiaru wysyłania plików JavaScript

Czy Jest jakiś sposób, aby sprawdzić Rozmiar pliku przed przesłaniem go za pomocą JavaScript?

Author: informatik01, 2010-09-15
Source

12 answers

TAK , jest nowa funkcja z W3C, która jest obsługiwana przez niektóre nowoczesne przeglądarki, File API . Można go użyć do tego celu i łatwo jest sprawdzić, czy jest obsługiwany i wycofać się (jeśli to konieczne) do innego mechanizmu, jeśli nie jest.]}

Oto pełny przykład: 

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

I tutaj {[5] } jest w akcji. Spróbuj tego w najnowszej wersji Chrome lub Firefox.

Nieco poza tematem, ale: zauważ, że Walidacja po stronie klienta jest nie zastąp dla walidacji po stronie serwera. Walidacja po stronie klienta ma na celu wyłącznie umożliwienie zapewnienia przyjemniejszego doświadczenia użytkownika. Na przykład, jeśli nie zezwalasz na przesyłanie pliku więcej niż 5MB, możesz użyć walidacji po stronie klienta, aby sprawdzić, czy plik wybrany przez użytkownika nie ma więcej niż 5MB i dać mu miły, przyjazny komunikat, jeśli tak jest (aby nie spędzał całego czasu na przesyłaniu tylko po to, aby wynik został odrzucony na serwerze), ale musisz również wymusić ten limit na serwerze. serwer, jak wszystkie limity po stronie klienta (i inne walidacje) można obejść.

 269
Author: T.J. Crowder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-22 12:04:58

Using 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>
 97
Author: Ben,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-15 04:49:43

Działa dla dynamicznego i statycznego elementu pliku

Javascript Only Solution 

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">
 23
Author: Arun Prasad E S,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-20 07:25:57

nie tak, używanie API plików w nowszych przeglądarkach. Zobacz odpowiedź TJ po szczegóły.

Jeśli potrzebujesz również obsługiwać starsze przeglądarki, będziesz musiał użyć Flash-based uploader jak SWFUploadlub Uploadify aby to zrobić.

The Swfupload Features Demo pokazuje jak działa ustawienie file_size_limit.

Zauważ ,że to (oczywiście) wymaga Flasha, plus sposób, w jaki działa, różni się nieco od zwykłych formularzy wysyłania.

 11
Author: Pekka 웃,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-18 15:24:43

Jeśli używasz walidacji jQuery, możesz napisać coś takiego: 

$.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.'
);
 7
Author: Nikolaos Georgiou,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-15 11:08:29

To dość proste.

            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;
            }
 5
Author: Hasan Tuna Oruç,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-22 14:37:57

Używam jednej głównej funkcji Javascript, którą znalazłem na stronie Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , wraz z inną funkcją z Ajaxem i zmienioną zgodnie z moimi potrzebami. Otrzymuje identyfikator elementu dokumentu dotyczący miejsca w kodzie html, w którym chcę zapisać Rozmiar pliku.

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

Cheers

 2
Author: Jose Gaspar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-26 18:22:28

Mimo odpowiedzi na pytanie, chciałem opublikować swoją odpowiedź. Może się przydać przyszłym widzom.Możesz go użyć jak w poniższym kodzie.

<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");
    }
  }
 2
Author: Lemon Kazi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-06-01 07:51:37

Przykład JQuery podany w tym wątku był bardzo Nieaktualny, a google w ogóle nie było pomocne, więc oto moja wersja: 

 <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
Author: nodws,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-08-10 17:48:38

Możesz spróbować tego fineuploader

Działa dobrze pod IE6( i avove), Chrome lub Firefox

 0
Author: anson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-20 08:53:23

Zrobiłem coś takiego: 

$('#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
Author: kibus90,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-30 21:55:41

Jeśli ustawisz Ie 'tryb dokumentu' na 'standardy', możesz użyć prostej metody JavaScript 'size', aby uzyskać rozmiar przesłanego pliku.

Ustaw Ie 'tryb dokumentu' na 'standardy': 

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

Następnie użyj metody javascript' size', aby uzyskać rozmiar przesłanego pliku: 

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>
Dla mnie działa.
 -2
Author: Lilla,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-31 13:54:41