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

Question

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

Я думал, что maxlength = 20000 = 20k, но это, похоже, не работает вообще.

Я работаю на Rails, а не на PHP, но подумал, что было бы намного проще сделать это на стороне клиента в HTML / CSS или, в крайнем случае, с использованием jQuery. Это настолько просто, что должен быть какой-то HTML-тег, который я пропускаю или не знаю

Нужна поддержка IE7 +, Chrome, FF3.6 +. Я полагаю, что в случае необходимости я мог бы просто поддерживать IE8 +.

Спасибо.

Answer 1

Это вполне возможно.Используйте Javascript.

Я использую jQuery для выбора элемента ввода.У меня настроено событие on change.

$("#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.

Answer 2

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/

Answer 3

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

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

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

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

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

Answer 4

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