Ограничить размер загрузки файла (html-ввод)

Ответ 1

Вы не можете сделать это на стороне клиента. Вам придется сделать это на сервере.

Редактировать: Этот ответ устарел!

На момент этого редактирования HTML файл API в основном поддерживается во всех основных браузерах.

Я бы предоставил обновление с решением, но @mark.inman.winning уже сделал это.

Имейте в виду, что даже если теперь возможно выполнить проверку на клиенте, вы все равно должны проверить его на сервере. Все проверки на стороне клиента могут быть обойдены.

Ответ 2

Это вполне возможно. Используйте 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.

Ответ 3

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/

Ответ 4

Посмотрите на фрагмент кода ниже ↓

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" />

Ответ 5

<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>

Ответ 6

Пример видеофайла (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>