Как проверить размер входного файла с помощью jQuery?
-
05-07-2019 - |
Вопрос
У меня есть форма с возможностью выгрузки файлов, и я хотел бы иметь возможность получать хорошие отчеты об ошибках на стороне клиента, если файл, который пытается загрузить пользователь, слишком велик, есть ли способ проверить размер файла с помощью jQuery? или просто на клиенте или как-то выкладываешь файл обратно на сервер для проверки?
Решение
На самом деле у вас нет доступа к файловой системе (например, для чтения и записи локальных файлов), однако, из-за спецификации HTML5 File Api, есть некоторые свойства файла, к которым у вас есть доступ, и размер файла является одним из их.
Для HTML ниже
<input type="file" id="myFile" />
попробуйте следующее:
//binds to onchange event of your input field
$('#myFile').bind('change', function() {
//this.files[0].size gets the size of your file.
alert(this.files[0].size);
});
Поскольку это часть спецификации HTML5, она будет работать только для современных браузеров (v10 требуется для IE), и я добавил здесь больше подробностей и ссылок о другой информации о файлах, которую вы должны знать: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the- размер файла /
<Ч>Поддержка старых браузеров
Помните, что старые браузеры будут возвращать значение null
для предыдущего вызова this.files
, поэтому обращайтесь к this.files [0]
вызовет исключение, и вам следует проверить поддержку File API перед его использованием
Другие советы
Если вы хотите использовать validate
в jQuery, вы можете создать этот метод:
$.validator.addMethod('filesize', function(value, element, param) {
// param = size (en bytes)
// element = element to validate (<input>)
// value = value of the element (file name)
return this.optional(element) || (element.files[0].size <= param)
});
Вы бы это использовали:
$('#formid').validate({
rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }},
messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});
Этот код:
$("#yourFileInput")[0].files[0].size;
Возвращает размер файла для ввода формы.
На FF 3.6 и выше этот код должен быть:
$("#yourFileInput")[0].files[0].fileSize;
Я также публикую свое решение, используемое для элемента управления ASP.NET FileUpload
.
Возможно, кто-то найдет это полезным.
$(function () {
$('<%= fileUploadCV.ClientID %>').change(function () {
//because this is single file upload I use only first index
var f = this.files[0]
//here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
if (f.size > 8388608 || f.fileSize > 8388608)
{
//show an alert to the user
alert("Allowed file size exceeded. (Max. 8 MB)")
//reset file upload control
this.value = null;
}
})
});
Используйте ниже, чтобы проверить размер файла и выяснить, больше ли он,
$("input[type='file']").on("change", function () {
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}
});
Этот тип проверки можно выполнить с помощью Flash или Silverlight, но не с помощью Javascript. Песочница javascript не разрешает доступ к файловой системе. Проверка размера должна выполняться на стороне сервера после его загрузки.
Если вы хотите пойти по маршруту Silverlight / Flash, вы можете проверить, установлен ли он по умолчанию на обычный обработчик загрузки файлов, который использует обычные элементы управления. Таким образом, если у вас установлен Silverlight / Flash, их опыт будет немного более насыщенным.
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
function checkSize(){
var size = $('#uploadForm')["0"].firstChild.files["0"].size;
console.log(size);
}
</script>
Я считаю, что это проще всего, если вы не планируете отправлять форму с помощью стандартных методов ajax / html5, но, конечно, это работает с чем угодно.
ЗАМЕЧАНИЯ:
var size = $('#uploadForm')["0"]["0"].files["0"].size;
Раньше это работало, но больше не работает в Chrome, я просто протестировал приведенный выше код, и он работал как в ff, так и в chrome (последний). Второй [" 0 "] теперь является firstChild.
Пожалуйста, попробуйте это:
var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;
if (sizeInKB >= sizeLimit) {
alert("Max file size 30KB");
return false;
}