Ответы:
Да , есть новая функция от 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
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;
Нет Да, используя File 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>Вы можете попробовать этот Fineuploader
Работает нормально под IE6 (и выше), Chrome или Firefox
Если вы установили 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>Меня устраивает.