Есть ли способ проверить размер файла с размером файла перед загрузкой его с помощью JavaScript?Оценка размера файла для скачивания файла
ответ
Да, есть новая функция от 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>
И here это в действии. Попробуйте использовать последнюю версию Chrome или Firefox.
Немного не по теме, но: Обратите внимание, что проверка на стороне клиента не никакой замены для проверки на стороне сервера. Валидация на стороне клиента заключается исключительно в том, чтобы обеспечить более приятный пользовательский интерфейс. Например, если вы не разрешаете загружать файл более 5 МБ, вы можете использовать проверку на стороне клиента, чтобы проверить, что выбранный пользователем файл не превышает 5 МБ, и дать им приятное приветственное сообщение, если оно (поэтому они не тратят все это время на загрузку только для того, чтобы получить результат, выброшенный на сервер), но вы должны также применять этот предел на сервере, поскольку все ограничения на стороне клиента (и другие проверки) можно обойти ,
No
Да, используя API файлов в новых браузерах. См. Ответ TJ для деталей.
Если вам необходимо также поддерживать более старые браузеры, вам необходимо использовать Flash-загрузчик, например SWFUpload или Uploadify.
SWFUpload Features Demo показывает, как работает file_size_limit
.
Обратите внимание, что для этого (очевидно) требуется Flash, а также способ его работы немного отличается от обычных форм загрузки.
Вы можете попробовать это fineuploader
Он отлично работает под IE6 (и avove), Chrome или Firefox
Fine Uploader не может проверить размер файла в IE9 и старше, поскольку поддержка API файлов не поддерживается. IE10 - первая версия Internet Explorer, которая поддерживает API файлов. –
Использование 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>
Если вы используете 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.'
);
Я использую одну главную функцию 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>
Приветствия
Если вы установите «Режим документа» ИЭ к «стандартам» вы можете использовать простой метод JavaScript «размер», чтобы получить размер загруженного файла в.
Set 'Режим документа' ИЭ к 'стандартам':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Than, используйте 'размер' JavaScript метод, чтобы получить размер загруженного файла в:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
Это работает для меня ,
Это не будет работать в IE9 или старше, независимо от того, какие метатеги вы добавляете. –
Это довольно просто.
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;
}
Несмотря на то, что на вопрос ответили, я хотел опубликовать свой ответ. Может пригодиться будущим зрителям. Вы можете использовать его, как в следующем коде.
<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");
}
}
Работы для динамического и статического элемента файла (Метод FileSize не является стандартной функцией и устаревшим с Gecko 7.0.)
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">
Метод FileSize является нестандартной функцией и устарел после Gecko 7.0. https://developer.mozilla.org/en-US/docs/Web/API/File/fileSize – MissRaphie
Хороший ответ. У меня была такая же проблема, но ваше решение сработало для меня :) –
JQuery ex достаточно при условии, в этой теме был крайне устарел, и 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>
- 1. Valums Максимальный размер файла для скачивания файла?
- 2. форсирование файла для скачивания
- 3. Обслуживание файла .json для скачивания
- 4. Maven плагин для скачивания файла
- 5. отправка файла клиенту для скачивания
- 6. Предоставить ссылку для скачивания файла
- 7. Показать сообщение после отправки файла для скачивания
- 8. php Создание уникального файла для скачивания
- 9. jax-rs клиент для скачивания файла
- 10. Дайте ссылку для скачивания файла с сервера
- 11. Sitecore - Создать ссылку для скачивания файла
- 12. Перенаправить PHP для автоматического скачивания .dat файла
- 13. Создание динамически сгенерированного файла, доступного для скачивания
- 14. Ссылка для скачивания файла по пути
- 15. Увеличить размер файла для скачивания cakephp 3
- 16. Магический номер для безопасного скачивания файла
- 17. Временная ссылка для скачивания файла с ASP.NET
- 18. путь для скачивания файла не работает
- 19. Размер файла для скачивания в реальном времени
- 20. Chef оценка файла only_if
- 21. Оценка размера изображения
- 22. Оценка размера файла на диске при использовании ObjectOutputStream
- 23. оценка Выражение для преобразования файла сценария местоположения
- 24. Получить удаленный размер файла по HTTP без скачивания указанного файла
- 25. Сценарий для суммирования размера файла
- 26. Предел размера файла для чтения()?
- 27. Apache получить дату файла без скачивания
- 28. Создание файла, а затем запуск безопасного скачивания
- 29. Захват кадра без скачивания всего файла?
- 30. CasperJS Время скачивания файла после 30 секунд
+1 для «всех ограничений на стороне клиента (и других валидаций) можно обойти». Это справедливо и для «родных»/«скомпилированных» интерфейсных приложений базы данных. И не помещайте пароли доступа к базе данных в свой скомпилированный код, даже не «зашифрованный» (с паролем, который тоже находится в коде - просто видел это недавно). – masterxilo