Làm cách nào để kiểm tra kích thước đầu vào của tệp với jQuery?

Tôi có một biểu mẫu với khả năng tải lên tệp và tôi muốn có thể có một số báo cáo lỗi phía máy khách tốt nếu tệp mà người dùng đang cố tải lên quá lớn, có cách nào để kiểm tra kích thước tệp bằng jQuery, hoàn toàn không trên máy khách hoặc bằng cách nào đó đăng tập tin trở lại máy chủ để kiểm tra?

Bạn thực sự không có quyền truy cập vào hệ thống tệp (ví dụ: đọc và ghi tệp cục bộ), tuy nhiên, do đặc tả Api của tệp HTML5, có một số thuộc tính tệp mà bạn có quyền truy cập và kích thước tệp là một trong số đó.

Đối với HTML bên dưới

<input type="file" id="myFile" />

hãy thử như sau:

//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);

});

Vì nó là một phần của đặc tả HTML5, nó sẽ chỉ hoạt động cho các trình duyệt hiện đại (v10 cần thiết cho IE) và tôi đã thêm vào đây thêm chi tiết và liên kết về thông tin tệp khác mà bạn nên biết: http://felipe.sabino.me/javascript / 2012/01/30 / javascipt-tests-the-file-size /

Hỗ trợ trình duyệt cũ

Xin lưu ý rằng các trình duyệt cũ sẽ trả về nullgiá trị cho this.filescuộc gọi trước đó , vì vậy việc truy cập this.files[0]sẽ đưa ra một ngoại lệ và bạn nên kiểm tra hỗ trợ API tệp trước khi sử dụng

Nếu bạn muốn sử dụng jQuery, validatebạn có thể bằng cách tạo phương thức này:

$.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) 
});

Bạn sẽ sử dụng nó:

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

Mã này:

$("#yourFileInput")[0].files[0].size;

Trả về kích thước tệp cho một đầu vào mẫu.

Trên FF 3.6 trở lên, mã này phải là:

$("#yourFileInput")[0].files[0].fileSize;

Tôi cũng đang đăng giải pháp của mình, được sử dụng cho một FileUploadđiều khiển ASP.NET . Có lẽ ai đó sẽ thấy nó hữu ích.

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

Sử dụng bên dưới để kiểm tra kích thước tệp và xóa nếu nó lớn hơn,

    $("input[type='file']").on("change", function () {
     if(this.files[0].size > 2000000) {
       alert("Please upload file less than 2MB. Thanks!!");
       $(this).val('');
     }
    });

Bạn có thể thực hiện loại kiểm tra này với Flash hoặc Silverlight nhưng không phải Javascript. Hộp cát javascript không cho phép truy cập vào hệ thống tệp. Kiểm tra kích thước sẽ cần phải được thực hiện phía máy chủ sau khi nó đã được tải lên.

Nếu bạn muốn đi theo tuyến Silverlight / Flash, bạn có thể kiểm tra xem chúng có được cài đặt mặc định cho trình xử lý tải lên tệp thông thường sử dụng các điều khiển thông thường không. Bằng cách này, nếu cài đặt Silverlight / Flash, trải nghiệm của họ sẽ phong phú hơn một chút.

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

Tôi thấy điều này là dễ nhất nếu bạn không có kế hoạch gửi biểu mẫu thông qua các phương thức ajax / html5 tiêu chuẩn, nhưng tất nhiên nó hoạt động với mọi thứ.

GHI CHÚ:

var size = $('#uploadForm')["0"]["0"].files["0"].size;

Điều này đã từng hoạt động, nhưng nó không còn trong chrome nữa, tôi chỉ thử mã ở trên và nó hoạt động ở cả ff và chrome (mới nhất). Cái thứ hai ["0"] bây giờ là FirstChild.

Vui lòng thử điều này:

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