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

Question

Tôi có một biểu mẫu có 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 khách hàng tốt đẹp nếu tệp mà người dùng đang cố tải lên quá lớn, có cách kiểm tra kích thước tệp với jQuery không, hoặc hoàn toàn trên máy khách hoặc bằng cách nào đó đăng tải tệp lên máy chủ để kiểm tra?

Answer 1

Bạn thực sự không có quyền truy cập hệ thống tệp (ví dụ: đọc và ghi tệp cục bộ), do đặc tả Tệp Api 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à của họ.

Đố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ỉ làm việc cho các trình duyệt hiện đại (v10 cần thiết cho IE) và Tôi đã thêm here chi tiết và liên kết khác về thông tin tệp khác mà bạn nên biết: http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

---

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

Hãy nhận biết rằng các trình duyệt cũ sẽ trả về một giá trị null cho this.files gọi trước, vì vậy việc tiếp cận this.files[0] sẽ nâng cao một ngoại lệ và bạn nên check for File API support trước khi sử dụng nó

Answer 2

Bạn có thể thực hiện loại kiểm tra này bằng Flash hoặc Silverlight chứ 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. Kích thước kiểm tra 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 sử dụng 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 hay không. Bằng cách này, nếu Silverlight/Flash đã cài đặt, trải nghiệm của họ sẽ giàu hơn một chút.

Answer 3

Nếu bạn muốn sử dụng jQuery validate bạn có thể bằng cách tạo ra phương pháp 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" } 
}); 

Answer 4

Mã này:

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

Trả về kích thước tập tin cho một đầu vào hình thức.

Mở FF 3.6 và phiên bản mã này nên là:

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

Answer 5

Tôi gửi bài giải pháp của tôi cũng vậy, sử dụng cho một ASP.NET FileUpload kiểm soát. 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; 
     } 
    }) 
}); 

Answer 6

<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 đệ trình các hình thức thông qua tiêu chuẩn ajax/html5 phương pháp, nhưng tất nhiên nó hoạt động với bất cứ điều gì.

GHI CHÚ:

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

này được sử dụng để làm việc, nhưng nó không trong chrome nữa, tôi chỉ cần kiểm tra các mã trên và nó hoạt động trong cả ff và chrome (mới nhất). Thứ hai ["0"] bây giờ là firstChild.