Есть ли способ проверить размер файла, прежде чем загружать его с помощью JavaScript?
Проверка размера загрузки файла JavaScript
Ответ 1
Да, есть новая функция 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 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 МБ, и дать им приятное приветственное сообщение, если оно (поэтому они не тратят все это время на загрузку только для того, чтобы получить результат, выброшенный на сервер), но вы должны также применять этот предел на сервере, так как все ограничения на стороне клиента (и другие валидации) можно обойти.
Ответ 2
Использование 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>
Ответ 3
Работает для динамического и статического файлового элемента
Решение 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">Ответ 4
Нет Да, используя File API в новых браузерах. Смотрите ответ TJ для деталей.
Если вам также требуется поддержка старых браузеров, вам придется использовать загрузчик на основе Flash, такой как SWFUpload или Uploadify, чтобы сделать это.
SWFUpload Возможности Демо показывает, как file_size_limit работает установка.
Обратите внимание, что для этого (очевидно) требуется Flash, плюс способ его работы немного отличается от обычных форм загрузки.
Ответ 5
Это довольно просто.
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;
}
Ответ 6
Если вы используете 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.'
);
Ответ 7
Я использую одну главную функцию 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>
Приветствия
Ответ 8
Даже если на вопрос будет дан ответ, я хотел бы опубликовать свой ответ. Может пригодиться будущим зрителям. Вы можете использовать его, как в следующем коде.
<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");
}
}
Ответ 9
Пример 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>
Ответ 10
Вы можете попробовать этот Fineuploader
Работает нормально под IE6 (и выше), Chrome или Firefox
Ответ 11
Я сделал что-то подобное:
$('#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">Ответ 12
Если вы установите Ie 'Document Mode' в "Standards", вы можете использовать простой способ "размера" javascript, чтобы получить размер загруженного файла.
Установите Ie 'Document Mode' в 'Standards':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
Затем, используя метод "размер" javascript, чтобы получить размер загруженного файла:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>
Это работает для меня.