Giới hạn kích thước của tệp tải lên (phần tử đầu vào html)

Tôi chỉ muốn giới hạn kích thước tệp mà người dùng có thể tải lên.

Tôi đã nghĩ maxlength = 20000 = 20k nhưng điều đó dường như không hiệu quả chút nào.

Tôi đang chạy trên Rails, không phải PHP, nhưng tôi nghĩ sẽ đơn giản hơn nhiều nếu thực hiện nó ở phía máy khách trong HTML / CSS hoặc phương án cuối cùng là sử dụng jQuery. Điều này rất cơ bản mặc dù phải có một số thẻ HTML mà tôi đang thiếu hoặc không biết.

Đang tìm cách hỗ trợ IE7 +, Chrome, FF3.6 +. Tôi cho rằng tôi có thể thoát khỏi chỉ cần hỗ trợ IE8 + nếu cần.

Cảm ơn.

Điều này hoàn toàn có thể làm được. Sử dụng Javascript.

Tôi sử dụng jQuery để chọn phần tử đầu vào. Tôi đã thiết lập nó với một sự kiện thay đổi.

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

});

Đoạn mã trên lưu tất cả các tên tệp mà tôi cho là xứng đáng để lưu vào trang gửi trước khi quá trình gửi thực sự diễn ra. Tôi thêm các tệp "được chấp thuận" vào val của phần tử đầu vào bằng cách sử dụng jQuery để gửi biểu mẫu sẽ gửi tên của các tệp tôi muốn lưu. Tất cả các tệp sẽ được gửi, tuy nhiên, bây giờ ở phía máy chủ, chúng tôi phải lọc chúng ra. Tôi chưa viết bất kỳ mã nào cho điều đó, nhưng hãy sử dụng trí tưởng tượng của bạn. Tôi giả sử người ta có thể thực hiện điều này bằng vòng lặp for và khớp các tên được gửi từ trường nhập liệu và khớp chúng với biến $ _FILES (PHP Superglobal, xin lỗi tôi không biết biến tệp ruby).

Quan điểm của tôi là bạn có thể kiểm tra các tệp trước khi gửi. Tôi làm điều này và sau đó xuất nó cho người dùng trước khi họ gửi biểu mẫu, để cho họ biết những gì họ đang tải lên trang web của tôi. Bất kỳ thứ gì không đáp ứng tiêu chí sẽ không được hiển thị lại cho người dùng và do đó họ nên biết rằng các tệp quá lớn sẽ không được lưu. Điều này sẽ hoạt động trên tất cả các trình duyệt vì tôi không sử dụng đối tượng FormData.

var uploadField = document.getElementById("file");

uploadField.onchange = function() {
    if(this.files[0].size > 2097152){
       alert("File is too big!");
       this.value = "";
    };
};

Ví dụ này sẽ hoạt động tốt. Tôi thiết lập nó cho khoảng 2MB, 1MB tính bằng Byte là 1,048,576 để bạn có thể nhân nó với giới hạn bạn cần.

Đây là ví dụ jsfiddle để rõ ràng hơn:
https://jsfiddle.net/7bjfr/808/

Bạn không thể làm điều đó ở phía máy khách. Bạn sẽ phải làm điều đó trên máy chủ.

Chỉnh sửa: Câu trả lời này đã lỗi thời!

Tại thời điểm chỉnh sửa này, API tệp HTML hiện được hỗ trợ trên tất cả các trình duyệt chính .

Tôi muốn cung cấp một bản cập nhật với giải pháp, nhưng @ mark.inman.winning đã làm được .

Hãy nhớ rằng ngay cả khi bây giờ có thể xác thực trên máy khách, bạn vẫn nên xác thực nó trên máy chủ. Tất cả các xác thực phía máy khách có thể bị bỏ qua.

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

Nếu bạn cần xác thực loại tệp , hãy viết bình luận bên dưới và tôi sẽ chia sẻ giải pháp của mình.

(Spoiler: acceptthuộc tính không phải là giải pháp chống đạn)

Ví dụ về tệp video (HTML + Javascript):

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 = "";
    }
};

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