Đầu vào HTML có kích thước tệp tối đa

Sau đó, giá trị trong đầu vào ẩn có tên 'MAX_FILE_SIZE' được gửi khi nhấp vào nút gửi

Sau đó, máy chủ sẽ tự động kiểm tra xem kích thước của tệp có vượt quá giá trị MAX_FILE_SIZE không

Nếu đúng như vậy thì $_FILES[‘txtUploadFileName’][‘error’] của bạn sẽ bằng 2

Nếu bạn có nhiều tệp tải lên trong một biểu mẫu thì tất cả các tên đầu vào của biểu mẫu phải được đặt tên dưới dạng mảng bằng cách nối thêm vào mỗi tên

Sau đó, lặp qua tất cả các tên tệp sẽ được tải lên trong $_FILES[‘txtUploadFileName’][‘tmp_name’] và xử lý chúng riêng lẻ bằng cách sử dụng cùng một quy trình mà bạn sẽ sử dụng nếu chỉ tải lên một tệp trên mỗi biểu mẫu

Có, bạn có thể giới hạn kích thước tệp tải lên, mặc dù đã có giới hạn tối đa là 150 MB. Điều này có nghĩa là người dùng biểu mẫu không thể tải lên các tệp lớn hơn 150 MB trên mỗi trường tải lên

Để giới hạn kích thước tệp tải lên, hãy chuyển đến Trình chỉnh sửa biểu mẫu của bạn và nhấp vào trường Tải tệp lên trong biểu mẫu của bạn. Bảng Chỉnh sửa Trường của nó sẽ mở ra ở phía bên trái của trang. Trong hộp Kích thước tệp tối đa, nhập kích thước tối đa ưa thích của bạn (tính bằng KB). Nếu muốn thêm giới hạn dung lượng tối thiểu thì gõ vào ô Min file size. Đó là nó

---

Những bài viết liên quan

Phần tử đầu vào có thuộc tính loại có giá trị là "file" biểu thị danh sách các mục tệp, mỗi mục bao gồm tên tệp, loại tệp và nội dung tệp (nội dung của tệp)

Thuộc tính được phép #

ⓘ thuộc tính toàn cầu Bất kỳ thuộc tính nào được phép trên toàn cầu. ⓘ name = string #Phần tên của cặp tên/giá trị được liên kết với phần tử này nhằm mục đích gửi biểu mẫu. ⓘ bị vô hiệu hóa = "bị vô hiệu hóa" hoặc "" (chuỗi trống) hoặc trống #Chỉ định rằng phần tử đại diện cho một điều khiển bị vô hiệu hóa. ⓘ form = tham chiếu ID MỚI #Giá trị của thuộc tính id trên biểu mẫu để liên kết phần tử. ⓘ type = "file" #Chỉ định rằng phần tử đầu vào của nó đại diện cho danh sách các mục tệp. ⓘ chấp nhận = danh sách các loại MIME #Cung cấp cho UA gợi ý về loại tệp mà máy chủ có thể chấp nhận. ⓘ lấy nét tự động = "lấy nét tự động" hoặc "" (chuỗi trống) hoặc trống MỚI #Chỉ định rằng phần tử đại diện cho một điều khiển mà UA sẽ lấy tiêu điểm ngay khi tài liệu được tải. ⓘ bắt buộc = "bắt buộc" hoặc "" (chuỗi trống) hoặc trống MỚI #Chỉ định rằng phần tử là một phần bắt buộc của việc gửi biểu mẫu. ⓘ multiple = "multiple" hoặc "" (chuỗi trống) hoặc trống NEW #Chỉ định rằng phần tử cho phép nhiều giá trị

Các ràng buộc và lời khuyên bổ sung #

• Đầu vào phần tử tương tác không được xuất hiện dưới dạng phần tử con của phần tử a
• Đầu vào phần tử tương tác không được xuất hiện dưới dạng phần tử con của phần tử nút
• Bất kỳ phần tử đầu vào nào hậu duệ của phần tử nhãn có thuộc tính for đều phải có giá trị ID khớp với giá trị ID đó
• Thuộc tính danh sách của phần tử “đầu vào” phải tham chiếu đến phần tử datalist
• Thuộc tính usemap trên phần tử đầu vào đã lỗi thời. Sử dụng phần tử img thay vì phần tử đầu vào cho bản đồ hình ảnh
• Thuộc tính căn chỉnh trên phần tử đầu vào đã lỗi thời. Sử dụng CSS thay thế

Bỏ sót thẻ #

Phần tử đầu vào là phần tử void. Một phần tử đầu vào phải có thẻ bắt đầu nhưng không được có thẻ kết thúc

Trong hướng dẫn này, chúng tôi sẽ sử dụng JavaScript để hạn chế kích thước tệp tải lên. Khi xây dựng trang web cho phép người dùng tải tệp lên, điều này giúp quản lý dung lượng ổ đĩa cần thiết. Tập lệnh này sẽ hoạt động với bất kỳ loại tệp nào vì chúng tôi chỉ đơn giản sử dụng đầu vào tệp HTML

Hãy bắt đầu với HTML cần thiết để tải tệp lên

<form>
  <p>[MAX FILE SIZE = 2MB]p>
  <input id="file-input" type="file" />
  <p id="file-result">p>
  <input id="file-submit" type="submit" disabled />
form>
Code language: HTML, XML (xml)

Lưu ý trạng thái ban đầu của nút gửi là disabled. Điều này sẽ ngăn biểu mẫu gửi (giả sử người dùng đã bật JavaScript) cho đến khi chúng tôi kiểm tra kích thước tệp

Bây giờ đối với JavaScript, đầu tiên là một số biến tham chiếu các phần tử HTML

let fileInput = document.getElementById("file-input");
let fileResult = document.getElementById("file-result");
let fileSubmit = document.getElementById("file-submit");
Code language: JavaScript (javascript)

Chúng tôi sẽ sử dụng một trình lắng nghe sự kiện để phát hiện sự thay đổi khi nhập tệp. Khi trạng thái của đầu vào tệp thay đổi (người dùng đã chọn tệp), chúng tôi sẽ chạy tập lệnh của mình để kiểm tra kích thước tệp đã chọn

fileInput.addEventListener("change", function () {  
  // TODO
});
Code language: JavaScript (javascript)

Trước tiên, bên trong trình xử lý sự kiện, chúng tôi kiểm tra xem tệp có tồn tại không và sau đó tính toán kích thước tệp

fileInput.addEventListener("change", function () {  
  if (fileInput.files.length > 0) {
    const fileSize = fileInput.files.item(0).size;
    const fileMb = fileSize / 1024 ** 2;
    alert(fileMb);
  }
});
Code language: JavaScript (javascript)

Nếu bạn chạy tập lệnh, bạn sẽ nhận được thông báo cảnh báo với kích thước tệp đã chọn tính bằng MB

Cuối cùng, chúng tôi sẽ xem liệu kích thước tệp có nhỏ hơn hoặc bằng giới hạn kích thước của chúng tôi không (2MB)

fileInput.addEventListener("change", function () {
  if (fileInput.files.length > 0) {
    const fileSize = fileInput.files.item(0).size;
    const fileMb = fileSize / 1024 ** 2;
    if (fileMb >= 2) {
      fileResult.innerHTML = "Please select a file less than 2MB.";
      fileSubmit.disabled = true;
    } else {
      fileResult.innerHTML = "Success, your file is " + fileMb.toFixed(1) + "MB.";
      fileSubmit.disabled = true;
    }
  }
});
Code language: JavaScript (javascript)

Nếu kích thước tệp lớn hơn 2 MB, chúng tôi sẽ tắt nút gửi và nhắc người dùng chọn tệp có kích thước nhỏ hơn. Mặt khác, nếu tệp nhỏ hơn 2MB, nút gửi sẽ được bật và thông báo thành công sẽ hiển thị

Đó là tất cả cho hướng dẫn này, bằng cách sử dụng những gì bạn đã học, giờ đây bạn có thể hạn chế kích thước tệp tải lên bằng JavaScript. Trong khi bạn ở đây, hãy chắc chắn kiểm tra bộ sưu tập hướng dẫn JavaScript ngày càng phát triển của chúng tôi

Kích thước trong tệp loại đầu vào là gì?

Làm cách nào để giới hạn tệp tối đa được chọn khi sử dụng nhiều tệp đầu vào?

Kích thước tối đa của tài liệu có thể được tải lên là bao nhiêu?

Làm cách nào để xác thực kích thước tệp trong JavaScript?