Есть ли способ проверить размер файла перед его загрузкой с помощью JavaScript?
Да , вы можете использовать для этого File API.
Вот полный пример (см. комментарии):
document.getElementById ("btnLoad"). addEventListener ("click", function showFileSize () {//(Невозможно использовать `typeof FileReader ===" function "` потому что, очевидно,//он возвращается как "объект" в некоторых браузерах. Так что просто посмотрите, есть ли он вообще//.) if (! window.FileReader) {//Это ОЧЕНЬ маловероятно, поддержка браузером почти универсальная консоль. log ("Файловый API пока не поддерживается в этом браузере."); return;} var input = document.getElementById ('fileinput'); if (! input.files) {//Это ОЧЕНЬ маловероятно, поддержка браузера является почти универсальным console.error ("Этот браузер, похоже, не поддерживает свойство файловых входов` files`. ");} else if (! input.files [0]) {addPara (" Пожалуйста, выберите файл перед нажав "Загрузить" ");} else {var file = input.f iles [0]; addPara ("Файл" + имя_файла + "равно" + размер файла + "размер в байтах"); }}); функция addPara (текст) {var p = document.createElement ("p"); p.textContent = текст; document.body.appendChild (p);}
body {font-family: sans-serif;}
Немного не по теме, но: Обратите внимание, что проверка на стороне клиента выполняется не заменяет проверку на стороне сервера. Проверка на стороне клиента предназначена исключительно для того, чтобы сделать возможным более приятный пользовательский интерфейс. Например, если вы не разрешаете загружать файл размером более 5 МБ, вы можете использовать проверку на стороне клиента, чтобы убедиться, что размер файла, выбранного пользователем, не превышает 5 МБ, и дать им приятное дружеское сообщение, если он (поэтому они не тратят все это время на загрузку только для того, чтобы получить результат, выброшенный на сервер), но вы должны также обеспечить соблюдение этого ограничения на сервере, поскольку все ограничения на стороне клиента ( и другие проверки) можно обойти.
Использование jquery:
Загрузить изображение: $ ('# image-file'). bind ('change', function () {alert ('Этот размер файла это: '+ this.files [0]. размер/1024/1024 + "MiB"); });
3
Работает для динамических и статических файловых элементов
Только решение для Javascript
function ValidateSize (file) {var FileSize = file.files [0] .size/1024/1024 ; //в MiB if (FileSize> 2) {alert ('Размер файла превышает 2 MiB'); //$ (файл) .val (''); //для очистки с помощью Jquery} else {}}
5
Это довольно просто.
var oFile = document.getElementById ("fileUpload"). files [0]; // if (oFile.size> 2097152)//2 МиБ для байтов. {предупреждение ("Размер файла не должен превышать 2 МБ!"); вернуть; }
1
Нет Да, с использованием File API в новых браузерах. Подробности см. В ответе TJ.
Если вам также нужна поддержка старых браузеров, для этого вам нужно будет использовать программу загрузки на основе Flash, например SWFUpload или Uploadify.
Демонстрация возможностей SWFUpload показывает, как работает параметр file_size_limit .
Обратите внимание, что для этого (очевидно) требуется Flash, плюс способ его работы немного отличается от обычных форм загрузки.
0
Если вы используете 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
0
Я сделал что-то вроде этого:
$ ('# файл изображения '). on (' изменить ', function () {var numb = $ (this) [0] .files [0] .size/1024/1024; numb = numb.toFixed (2); if (numb > 2) {alert ('большой, максимум 2 МБ. Размер вашего файла: '+ numb +' MiB ');} else {alert (' Все в порядке, в вашем файле есть '+ numb +' MiB ')}});
1
Я использую одну основную функцию Javascript, которую нашел на сайте Mozilla Developer Network https:// developer.mozilla.org/en-US/docs/Using_files_from_web_applications, а также другая функция с AJAX, измененная в соответствии с моими потребностями. Она получает идентификатор элемента документа, указывающий на то место в моем html-коде, где я хочу записать размер файла.
function updateSize (elementId) {var nBytes = 0, oFiles = document.getElementById (elementId) .files, nFiles = oFiles.length; for (var nFileId = 0 ; nFileId 1; nApprox/= 1024, nMultiple ++) {sOutput = "(" + nApprox.toFixed (3) + aMultiples [nMultiple] + ")"; } return sOutput;} document.getElementById ('spanFileSizeText'). innerHTML = updateSize ("inputFileUpload");
Приветствия
Пример JQuery, представленный в этой ветке, сильно устарел, и Google вообще не помог, так что вот моя версия:
$ ('# image-file'). on ('change ', function () {console.log ($ (this) [0] .files [0] .name +' размер файла: '+ $ (this) [0] .files [0] .size/1024/1024 + 'Mb');});
Хотя вопрос в ответил, я хотел опубликовать свой ответ. Может пригодиться будущим зрителям. Вы можете использовать его, как в следующем коде.
function readSingleFile (evt) {//Получение первого (и единственного!) файла из объекта FileList var f = evt.target.files [0]; если (е) {var r = new FileReader (); r.onload = функция (е) {содержимое переменной = e.target.result; alert ("Получил файл. n" + "name:" + f.name + "n" + "type:" + f.type + "n" + "size:" + f.size + "bytesn" + " начинается с: "+ contents.substr (1, contents. indexOf ("п"))); if (f.size> 5242880) {alert ('Размер файла больше 5 МБ!'); }} r.readAsText (f); } else {alert ("Не удалось загрузить файл"); }}
Вы можете попробовать этот Fineuploader
Он отлично работает в IE6 (и выше), Chrome или Firefox
1
Я столкнулся с этим вопросом, и единственная нужная мне строчка кода скрывалась в больших блоках кода.
Краткий ответ: this.files[0 visible.size
Кстати, JQuery не нужен.
Если вы установите для параметра ‘Document Mode’ значение ‘Standards’, вы можете использовать простой javascript ‘size’, чтобы получить размер загруженного файла.
Установите Ie ‘Document Mode’ в ‘Standards’:
Затем используйте метод javascript ‘size’, чтобы получить размер загруженного файла:
var uploadedFile = document. getElementById ('imageUpload'); var fileSize = uploadedFile.files [0] .size; предупреждение (размер файла);
У меня работает.
1
