Я хотел бы просто ограничить размер файла, который пользователь может загрузить.
Я думал maxlength = 20000 = 20k, но это, похоже, не работает вообще.
Я запускаю Rails, а не PHP, но думал, что было бы гораздо проще сделать это на стороне клиента в HTML/CSS или в качестве последнего средства, использующего jQuery. Это настолько базово, что должен быть некоторый HTML-тег, который я пропускаю или не знаю.
Ищете поддержку IE7 +, Chrome, FF3.6+. Полагаю, я мог бы уйти, просто поддерживая IE8 +, если это необходимо.
Спасибо.
Вы не можете сделать это на стороне клиента. Вам придется сделать это на сервере.
Редактировать: Этот ответ устарел!
На момент этого редактирования HTML файл API в основном поддерживается во всех основных браузерах.
Я бы предоставил обновление с решением, но @mark.inman.winning уже сделал это.
Имейте в виду, что даже если теперь возможно выполнить проверку на клиенте, вы все равно должны проверить его на сервере. Все проверки на стороне клиента могут быть обойдены.
Это вполне возможно. Используйте Javascript.
Я использую jQuery для выбора элемента ввода. Я настроил это на событие изменения.
$("#aFile_upload").on("change", function (e) {
var count=1;
var files = e.currentTarget.files; // puts all files into an array
// call them as such; files[0].size will get you the file size of the 0th file
for (var x in files) {
var filesize = ((files[x].size/1024)/1024).toFixed(4); // MB
if (files[x].name != "item" && typeof files[x].name != "undefined" && filesize <= 10) {
if (count > 1) {
approvedHTML += ", "+files[x].name;
}
else {
approvedHTML += files[x].name;
}
count++;
}
}
$("#approvedFiles").val(approvedHTML);
});
Приведенный выше код сохраняет все имена файлов, которые я считаю достойными сохранения на странице отправки, до того, как произойдет отправка. Я добавляю "утвержденные" файлы во входной элемент val с помощью jQuery, чтобы при отправке формы отправлялись имена файлов, которые я хочу сохранить. Все файлы будут отправлены, однако теперь на стороне сервера мы должны их отфильтровать. Я еще не написал никакого кода для этого, но используйте свое воображение. Я предполагаю, что это можно сделать с помощью цикла for и сопоставить имена, отправленные из поля ввода, и сопоставить их с переменной $ _FILES (PHP Superglobal, извините, я не знаю переменную файла ruby).
Суть в том, что вы можете проверять файлы перед отправкой. Я делаю это и затем выводю его пользователю, прежде чем он/она отправит форму, чтобы сообщить им, что они загружают на мой сайт. Все, что не соответствует критериям, не отображается обратно пользователю, и поэтому они должны знать, что слишком большие файлы не будут сохранены. Это должно работать во всех браузерах, потому что я не использую объект FormData.
var uploadField = document.getElementById("file");
uploadField.onchange = function() {
if(this.files[0].size > 2097152){
alert("File is too big!");
this.value = "";
};
};
Этот пример должен работать нормально. Я установил его примерно на 2 МБ, 1 МБ в байтах равен 1 048 576, так что вы можете умножить его на необходимый вам лимит.
Вот пример jsfiddle для большей ясности:
https://jsfiddle.net/7bjfr/808/
Посмотрите на фрагмент кода ниже ↓
const input = document.getElementById('input')
input.addEventListener('change', (event) => {
const target = event.target
if (target.files && target.files[0]) {
/*Maximum allowed size in bytes
5MB Example
Change first operand(multiplier) for your needs*/
const maxAllowedSize = 5 * 1024 * 1024;
if (target.files[0].size > maxAllowedSize) {
// Here you can ask your users to load correct file
target.value = ''
}
}
})<input type="file" id="input" /><script type="text/javascript">
$(document).ready(function () {
var uploadField = document.getElementById("file");
uploadField.onchange = function () {
if (this.files[0].size > 300000) {
this.value = "";
swal({
title: 'File is larger than 300 KB !!',
text: 'Please Select a file smaller than 300 KB',
type: 'error',
timer: 4000,
onOpen: () => {
swal.showLoading()
timerInterval = setInterval(() => {
swal.getContent().querySelector('strong')
.textContent = swal.getTimerLeft()
}, 100)
},
onClose: () => {
clearInterval(timerInterval)
}
}).then((result) => {
if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.timer
) {
console.log('I was closed by the timer')
}
});
};
};
});
</script>
Пример видеофайла (HTML + Javascript):
<form action="some_script" method="post" enctype="multipart/form-data">
<input id="max_id" type="hidden" name="MAX_FILE_SIZE" value="250000000" />
<input onchange="upload_check()" id="file_id" type="file" name="file_name" accept="video/*" />
<input type="submit" value="Upload"/>
</form>
<script>
function upload_check()
{
var upl = document.getElementById("file_id");
var max = document.getElementById("max_id").value;
if(upl.files[0].size > max)
{
alert("File too big!");
upl.value = "";
}
};
</script>