Tải lên kích thước tệp JavaScript

• Sep-02-2021
• giải pháp công nghệ

Trong hướng dẫn này, tôi sẽ cung cấp cho bạn ví dụ về cách xác thực kích thước tệp tối đa bằng javascript, đôi khi chúng tôi có yêu cầu kiểm tra xác thực kích thước tệp tối đa trước khi tải lên máy chủ hoặc sử dụng javascript kiểm tra xác thực kích thước tệp tải lên tối đa. Vì vậy, chúng tôi sẽ thực hiện ví dụ về xác thực kích thước tệp tải lên tối đa trong javascript

Trong ví dụ này, chúng tôi đang sử dụng sự kiện thay đổi và kiểm tra độ dài tệp với kích thước tệp. và hiển thị thông báo lỗi nếu kích thước tệp là kích thước tối đa đã cho, nếu không thì hiển thị thông báo thành công

Trong bài viết này, tôi sẽ giải thích cách thực thi giới hạn kích thước tệp bằng cách kiểm tra Kích thước tệp trước khi tải lên bằng HTML5

HTML5 cho phép các nhà phát triển truy cập nội dung và chi tiết của tệp bằng JavaScript và jQuery và do đó trong các trình duyệt hỗ trợ HTML5, người ta có thể dễ dàng xác định kích thước của Tệp

Xác định kích thước của tệp bằng JavaScript và HTML5

Đánh dấu HTML sau đây bao gồm Tệp tải lên tệp HTML và Nút. Khi nhấp vào nút, một chức năng có tên là Tải lên được thực thi

Bên trong chức năng này, trước tiên, kiểm tra được thực hiện để xác minh xem trình duyệt có hỗ trợ API tệp HTML5 hay không. Nếu trình duyệt hỗ trợ API tệp HTML5 thì kích thước của tệp được xác định và hiển thị

<đầu vào loại="tệp" id<="fileUpload" />

<đầu vào loại="nút" giá trị<="Upload" onclick="Upload()" />

<tập lệnh loại="text/javascript">

    hàm Tải lên() {

        var fileUpload = tài liệu. getElementById( "fileUpload" );

        if ( typeof (fileUpload. các tập tin). = "không xác định" ) {

            var size = parseFloat(fileUpload. tệp [0]. kích thước / 1024). toFixed(2);

            cảnh báo(size + " KB. " );

        } khác {

            cảnh báo( "Trình duyệt này không hỗ trợ HTML5. " );

}

}

tập lệnh>script>

Xác định kích thước của tệp bằng jQuery và HTML5

Đánh dấu HTML sau đây bao gồm Tệp tải lên tệp HTML và Nút. Khi nút được nhấp, trình xử lý sự kiện nhấp chuột jQuery được thực thi

Bên trong trình xử lý sự kiện nhấp chuột, trước tiên, kiểm tra được thực hiện để xác minh xem trình duyệt có hỗ trợ API tệp HTML5 hay không. Nếu trình duyệt hỗ trợ API tệp HTML5 thì kích thước của tệp được xác định và hiển thị

Vài ngày trước, khi tôi đang làm việc trên một ứng dụng web, tôi phải giới hạn kích thước tệp tải lên, vì vậy tôi đã kiểm tra kích thước tệp bằng javascript trước khi tải nó lên máy chủ, vì vậy trong bài viết này, tôi đã đề cập đến cách dễ dàng để kiểm tra kích thước tệp trong

Kiểm tra kích thước tệp khi thay đổi đầu vào tệp

Giả sử, chúng ta có HTML như bên dưới

sau đó chúng tôi sẽ tạo một hàm Javascript sẽ được gọi, sau khi chúng tôi thêm tệp vào loại đầu vào HTML = phần tử tệp và sử dụng chức năng đó, chúng tôi sẽ nhận được giá trị kích thước tệp

        document.querySelector('input[type="file"]').addEventListener("change", function(event) {
            var _size = this.files[0].size;
            
            var fSExt = new Array('Bytes', 'KB', 'MB', 'GB'),
            i=0;
            //check if file is in GB,MB,KB or Bytes
            while(_size > 900)
            { 
              _size/=1024; //divide file size 
              i++;
            }
            //get exact size
            var exactSize = (Math.round(_size*100)/100)+' '+fSExt[i];

            document.getElementById("fileSize").innerHTML= 'FILE SIZE = '+ exactSize;
        });

Trong đoạn mã trên, khi chúng tôi có kích thước tệp, thường là "Byte", chúng tôi sẽ chuyển đổi kích thước tệp thành MB, KB hoặc GB, tùy thuộc vào độ lớn của tệp

Để Chuyển đổi nó, chúng tôi đang lặp mã nếu kích thước tệp lớn hơn 900 và chia cho 1024 (1KB)

Đây là đầu ra demo

Đây là bản demo fiddle. https. //jsfiddle. mạng/m57uzkr9/

Nhận kích thước tệp đầu vào nhiều tệp

Nếu bạn đang tải lên nhiều tệp cùng một lúc, bạn có thể muốn lấy kích thước tệp của từng tệp, vì vậy chúng tôi có thể làm điều tương tự như trên, nhưng chúng tôi sẽ phải sử dụng vòng lặp For

Làm cách nào để lấy kích thước của tệp đã tải lên trong JavaScript?

Làm cách nào để lấy kích thước tệp tính bằng MB trong JavaScript?

Kích thước tối đa của tệp tải lên trong JavaScript là gì?

Làm cách nào để kiểm tra kích thước tệp tải lên trong jQuery?