Відповіді:
Так , є нова функція від 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 Мб, і надіслати їм приємне дружнє повідомлення, якщо воно є (тому вони не витрачають весь цей час на завантаження лише для того, щоб результат викинувся на сервер), але ви також повинні застосувати цей ліміт на сервері, оскільки всі обмеження на стороні клієнта (та інші перевірки) можна обійти.
Використання 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>
MiBякщо ви підрахуєте до бази 1024.
Працює для динамічного та статичного елемента файлу
Javascript Only Solution
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">sizeвластивість
$(obj).files[0].size/1024/1024; Але змінив це наobj.files[0].size/1024/1024;
Ні Так, використовуючи API файлів у новіших браузерах. Детальніше дивіться у відповіді TJ.
Якщо вам також потрібна підтримка старих браузерів, для цього вам доведеться використовувати завантажувач на базі Flash, наприклад SWFUpload або Uploadify .
SWFUpload Особливості демо показує , як file_size_limitпрацює установка.
Зауважте, що для цього (очевидно) потрібен Flash, а також спосіб його роботи трохи відрізняється від звичайних форм для завантаження.
Це досить просто.
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;
}
Якщо ви використовуєте 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.'
);
Я зробив щось подібне:
$('#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">Я використовую одну з основних функцій 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>
Ура
Хоча на запитання відповіли, я хотів опублікувати свою відповідь. Можливо, стане в нагоді майбутнім глядачам. Ви можете використовувати його, як у наведеному нижче коді.
<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");
}
}
Приклад 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>Ви можете спробувати цей прекрасний завантажувач
Він чудово працює під IE6 (і вище), Chrome або Firefox
Якщо ви встановите Ie 'Document Mode' на 'Standards', ви можете використовувати простий метод javascript 'size', щоб отримати розмір завантаженого файлу.
Установіть, тобто "Режим документа" на "Стандарти":
<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>Це працює для мене.