Проверка размера загружаемого файла JavaScript

Ответы:

327

Да , есть новая функция от W3C, которая поддерживается некоторыми современными браузерами, File API . Он может использоваться для этой цели, и его легко проверить, поддерживается ли он, и переключиться (если необходимо) на другой механизм, если это не так.

Вот полный пример:

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

И вот оно в действии. Попробуйте это с последней версией Chrome или Firefox.

Немного не по теме, но: обратите внимание, что проверка на стороне клиента не может заменить проверку на стороне сервера. Проверка на стороне клиента предназначена исключительно для того, чтобы обеспечить более приятное взаимодействие с пользователем. Например, если вы не разрешаете загружать файл размером более 5 МБ, вы можете использовать проверку на стороне клиента, чтобы убедиться, что выбранный пользователем файл имеет размер не более 5 МБ, и дать ему приятное дружеское сообщение, если оно (поэтому они не тратят все это время на загрузку только для того, чтобы получить результат на сервере), но вы также должны применять этот лимит на сервере, так как все ограничения на стороне клиента (и другие проверки) могут быть обойдены.

TJ Crowder
источник
12
+1 за «все ограничения на стороне клиента (и другие проверки) можно обойти». Это так же верно для "родных" / "скомпилированных" приложений веб-интерфейса базы данных. И не помещайте пароли доступа к базе данных в ваш скомпилированный код, даже не «зашифрованный» (с паролем, который тоже есть в коде - только что видел это недавно).
masterxilo
118

Используя 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>
Бен
источник
2
@ipd, есть ли шанс отступления IE8? (Я ненавижу себя за то, что даже упоминаю IE)
Ашер
2
Этот работает, но работает ли он также для нескольких файлов?
Ингус
4
Это должно быть, MiBесли вы рассчитываете на основе 1024.
Слартидан
69

Работает для динамического и статического файлового элемента

Решение Javascript Only

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">
Развернуть фрагмент

Арун Прасад Е.С.
источник
1
Хороший ответ. У меня была та же проблема, но ваше решение сработало для меня :)
Дипанкар Дас
1
NB OP отредактировал сообщение так, что код теперь правильный, используя sizeсвойство
UsAndRufus
1
Спасибо за ответ, я делал почти то же самое, но с одним изменением. $(obj).files[0].size/1024/1024; Но изменил это наobj.files[0].size/1024/1024;
Шакир Баба
Есть ли способ расширить это для проверки ширины и высоты? (оставляя «файл» в качестве отправной точки и предполагая, что он ссылается на изображение)
jlmontesdeoca
@jlmontesdeoca Я думаю, что вы можете прочитать файл с помощью canvas и получить его высоту и ширину здесь.
Арун Прасад ES
14

Нет Да, используя File API в новых браузерах. Смотрите ответ TJ для деталей.

Если вам также требуется поддержка старых браузеров, вам придется использовать загрузчик на основе Flash, такой как SWFUpload или Uploadify, чтобы сделать это.

SWFUpload Особенности демо показывает , как file_size_limitработает установка.

Обратите внимание, что для этого (очевидно) требуется Flash, плюс способ его работы немного отличается от обычных форм загрузки.

Пекка
источник
14

Это довольно просто.

            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;
            }
Хасан Тунец Оруч
источник
Лучший ответ. сладко и просто ... :)
А. Синха
12

Если вы используете jQuery Validation, вы можете написать что-то вроде этого:

$.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.'
);
Николаос Георгиу
источник
4

Я сделал что-то подобное:

$('#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">
Развернуть фрагмент

kibus90
источник
Это говорит о javascript, JQuery не в тегах
Hello234
3

Я использую одну основную функцию Javascript, которую я обнаружил на сайте Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications , а также другую функцию с AJAX и изменил в соответствии с моими потребностями. Он получает идентификатор элемента документа относительно места в моем HTML-коде, где я хочу записать размер файла.

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

ура

Хосе Гаспар
источник
3

Несмотря на ответ на вопрос, я хотел опубликовать свой ответ. Может пригодиться будущим зрителям. Вы можете использовать его, как показано в следующем коде.

<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

Пример JQuery, представленный в этой теме, был чрезвычайно устаревшим, и Google не помог, так что вот моя ревизия:

 <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
источник
1

Вы можете попробовать этот Fineuploader

Работает нормально под IE6 (и выше), Chrome или Firefox

Энсон
источник
3
Fine Uploader не может проверить размер файла в IE9 и старше, так как не поддерживает File API, не поддерживается. IE10 - это первая версия Internet Explorer, которая поддерживает File API.
Рэй Николус
-2

Если вы установили Ie «Режим документа» на «Стандарты», вы можете использовать простой метод javascript «Размер», чтобы получить размер загружаемого файла.

Установите «Режим документа» в «Стандарты»:

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

Затем используйте метод javascript «size» для получения размера загружаемого файла:

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

Меня устраивает.

Lilla
источник
1
Это не будет работать в IE9 или старше, независимо от того, какие метатеги вы добавляете.
Рэй Николус