Sprawdzanie poprawności rozmiaru przesyłanego pliku JavaScript

254

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

javascript validation file-upload Arka
źródło

327

Tak , nowa funkcja W3C jest obsługiwana przez niektóre nowoczesne przeglądarki, File API . Można go w tym celu wykorzystać i łatwo jest sprawdzić, czy jest obsługiwany, i w razie potrzeby wrócić do innego mechanizmu, jeśli nie jest.

Oto kompletny 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 jest w akcji. Wypróbuj to w najnowszej wersji Chrome lub Firefox.

Nie na temat, ale: Zwróć uwagę, że sprawdzanie poprawności po stronie klienta nie zastępuje sprawdzania poprawności po stronie serwera. Sprawdzanie poprawności po stronie klienta służy wyłącznie zapewnieniu lepszej obsługi. Na przykład, jeśli nie zezwalasz na przesyłanie pliku większego niż 5 MB, możesz użyć weryfikacji po stronie klienta, aby sprawdzić, czy plik wybrany przez użytkownika nie ma więcej niż 5 MB i przekazać mu miłą, przyjazną wiadomość, jeśli jest (więc nie spędzają całego czasu na przesyłaniu tylko po to, aby wynik został wyrzucony na serwer), ale należy również egzekwować ten limit na serwerze, ponieważ można ograniczyć wszystkie limity po stronie klienta (i inne walidacje).

TJ Crowder
źródło

12

+1 za „wszystkie limity po stronie klienta (i inne walidacje) można obejść”. Jest to tak samo prawdziwe w przypadku „nakładanych” / „skompilowanych” aplikacji frontendowych baz danych. I nie umieszczaj haseł dostępu do bazy danych w skompilowanym kodzie, nawet „zaszyfrowanych” (z hasłem również w kodzie - właśnie to widziałem).

masterxilo,

117

Za pomocą 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
źródło

2

@ipd, jakaś szansa na awarię IE8? (Nienawidzę się za to, że wspomniałem o IE)

Asher

2

Ten działa z rusztem, ale czy działa również z wieloma plikami?

Ingus

4

Powinno tak być, MiBjeśli obliczasz do podstawy 1024.

slartidan

69

Działa dla dynamicznego i statycznego elementu pliku

Rozwiązanie tylko dla Javascript

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

Rozwiń fragment kodu

Arun Prasad ES
źródło

1

Niezła odpowiedź. Miałem ten sam problem, ale twoje rozwiązanie zadziałało dla mnie :)

Dipankar Das,

1

NB OP edytował post, więc kod jest teraz poprawny, korzystając z sizewłaściwości

UsAndRufus,

1

Dzięki za odpowiedź Prawie robiłem to samo, ale z jedną zmianą. $(obj).files[0].size/1024/1024; Ale zmieniłem to naobj.files[0].size/1024/1024;

shakir Baba

Czy istnieje sposób na rozszerzenie tego w celu sprawdzania szerokości i wysokości? (pozostawiając „plik” jako punkt początkowy i zakładając, że odnosi się do obrazu)

jlmontesdeoca

@jlmontesdeoca Myślę, że możesz przeczytać plik za pomocą płótna i uzyskać jego wysokość i szerokość tutaj.

Arun Prasad ES

14

~~Nie~~ Tak, używając interfejsu API plików w nowszych przeglądarkach. Szczegółowe informacje można znaleźć w odpowiedzi TJ.

Jeśli potrzebujesz również obsługiwać starsze przeglądarki, musisz użyć do tego celu programu do przesyłania plików Flash, takiego jak SWFUpload lub Uploadify .

SWFUpload Funkcje Demo pokazuje, jak file_size_limitdziała ustawienie.

Pamiętaj, że to (oczywiście) wymaga Flasha, a sposób jego działania różni się nieco od zwykłych formularzy przesyłania.

Pekka
źródło

14

To całkiem 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;
            }

Hasan Tuna Oruç
źródło

Najlepsza odpowiedź. słodkie i proste ... :)

A. Sinha,

12

Jeśli używasz jQuery Validation, 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.'
);

Nikolaos Georgiou
źródło

4

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

Rozwiń fragment kodu

kibus90
źródło

To mówi javascript, JQuery nie ma w tagach

Hello234

3

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ą AJAX i zmieniłem ją zgodnie z moimi potrzebami. Otrzymuje identyfikator elementu dokumentu dotyczący miejsca w moim 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>

Twoje zdrowie

Jose Gaspar
źródło

3

Mimo odpowiedzi na pytanie chciałem opublikować swoją odpowiedź. Może się przydać przyszłym użytkownikom. Możesz użyć go 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");
    }
  }

Lemon Kazi
źródło

3

Przykład JQuery podany w tym wątku był bardzo nieaktualny, a Google nie był w ogóle pomocny, 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>

nodws
źródło

1

Możesz wypróbować ten fineuploader

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

anson
źródło

3

Program Fine Uploader nie może zweryfikować rozmiaru pliku w przeglądarce IE9 i starszych, ponieważ nie obsługuje interfejsu API plików. IE10 to pierwsza wersja przeglądarki Internet Explorer obsługująca interfejs API plików.

Ray Nicholus,

-2

Jeśli ustawisz Ie „Tryb dokumentu” na „Standardy”, możesz użyć prostej metody „size” javascript, aby uzyskać rozmiar przesyłanego pliku.

Ustaw Ie „Tryb dokumentu” na „Standardy”:

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

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

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

Mi to pasuje.

Lilla
źródło

1

To nie będzie działać w IE9 lub starszych, bez względu na dodane metatagi.

Ray Nicholus,

Sprawdzanie poprawności rozmiaru przesyłanego pliku JavaScript

Odpowiedzi: