Làm cách nào để xác thực loại tệp trong javascript?

Tôi đang làm việc trên phần phụ trợ (sử dụng PHP và MySQL) của một dự án cá nhân nơi tôi phải xác thực và lọc các tệp, chỉ cho phép png và các tệp có kích thước dưới một kích thước nhất định trên máy chủ

Tôi đã xác thực và lọc ở mặt sau trước khi nhận ra rằng mình có thể làm điều tương tự ở mặt trước. Điều này mang lại sự bảo vệ hai lớp. Chà, xác thực ở giao diện người dùng có thể bị bỏ qua dễ dàng, nhưng ít nhất, nó góp phần vào sự mạnh mẽ

Dưới đây là các cách để đạt được điều này ở giao diện người dùng bằng HTML hoặc javascript

Chỉ sử dụng HTML

Với HTML, bạn phải chỉ định loại tệp bằng thuộc tính chấp nhận. Với điều này, cửa sổ xuất hiện sau khi nhấp vào nút tải tệp lên sẽ chỉ hiển thị những tệp được chỉ định trong thuộc tính chấp nhận

<input type="file" multiple accept=".jpg, .png"/>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Trong ví dụ trên, tôi chỉ chấp nhận các tệp jpg và png. Các loại tệp khác như pdf hoặc docx thậm chí sẽ không hiển thị trong cửa sổ lựa chọn

Phương pháp này không thực sự hiệu quả vì người dùng có thể nhấp vào Tất cả các tệp từ cửa sổ chọn tệp, cửa sổ này sau đó sẽ hiển thị tất cả các loại tệp để anh ta chọn (bao gồm cả các tệp chúng tôi đang cố gắng tránh)

Lưu ý rằng tôi cũng đã bao gồm nhiều tệp để cho phép tải lên nhiều tệp

Hơn nữa, bạn không kiểm soát được kích thước của tệp. Đây là nơi Javascript xuất hiện

sử dụng javascript

Với javascript, chúng tôi có quyền kiểm soát loại tệp cũng như kích thước và siêu dữ liệu khác mà tệp đi kèm. Toàn bộ ý tưởng đằng sau quy trình này xoay quanh đối tượng tệp được tạo khi chúng tôi tải tệp lên. Đối tượng tệp này chứa thông tin về tệp như tên, kích thước, ngày sửa đổi hoặc tạo, v.v.

//attaching "change" event to the file upload button
document.getElementById("file").addEventListener("change", validateFile)

function validateFile(){
  const allowedExtensions =  ['jpg','png'],
        sizeLimit = 1_000_000; // 1 megabyte

  // destructuring file name and size from file object
  const { name:fileName, size:fileSize } = this.files[0];

  /*
  * if filename is apple.png, we split the string to get ["apple","png"]
  * then apply the pop() method to return the file extension
  *
  */
  const fileExtension = fileName.split(".").pop();

  /* 
    check if the extension of the uploaded file is included 
    in our array of allowed file extensions
  */
  if(!allowedExtensions.includes(fileExtension)){
    alert("file type not allowed");
    this.value = null;
  }else if(fileSize > sizeLimit){
    alert("file size too large")
    this.value = null;
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Là những cách tốt hơn để làm điều này? . Hãy cho tôi biết ở phần bình luận. Cảm ơn vì đã đọc

Gần đây, tôi đang làm việc trên một biểu mẫu và một ngày nọ, tôi có nhiệm vụ thêm xác thực loại vào trường nhập liệu. Suy nghĩ đầu tiên của tôi là chỉ cần kiểm tra loại tệp sau khi tệp được tải lên và dựa vào đó, lưu trữ tệp này trong danh sách trong ứng dụng của tôi hoặc thả nó. Ý tưởng là có danh sách cho phép tiện ích mở rộng và cho phép người dùng chỉ thêm các tệp có trong danh sách cho phép đó để đảm bảo rằng không có gì không an toàn được đưa vào hệ thống của chúng tôi

Tôi muốn đảm bảo rằng tôi đã bao gồm tất cả các tiện ích mở rộng cần thiết nên cuối cùng tôi đã kiểm tra những loại có thể được hỗ trợ bởi trường nhập liệu. Và sau đó tôi tìm thấy nó - thuộc tính accept trong chính đầu vào tệp. Nhờ đó, trải nghiệm người dùng thật tuyệt vời - các tệp không được liệt kê trong thuộc tính accept chỉ bị mờ đi nên người dùng không thể chọn chúng. Nó cho phép tránh nhầm lẫn, thông báo lỗi chuyên dụng và hiển thị rõ ràng cho người dùng những gì họ có thể và không thể thêm vào biểu mẫu

Tôi khuyên bạn nên kiểm tra chi tiết trong tài liệu, tôi chỉ muốn nhấn mạnh rằng thuộc tính này có thể chấp nhận cả phần mở rộng tệp và trình xác định loại tệp duy nhất. Xem các ví dụ bên dưới (lấy từ tại đây )

• accept="image/png" hoặc accept=".png" — Chấp nhận tệp PNG
• accept="image/png, image/jpeg" hoặc accept=".png, .jpg, .jpeg" — Chấp nhận tệp PNG hoặc JPEG
• accept="image/*" — Chấp nhận bất kỳ tệp nào có image/* loại MIME. (Nhiều thiết bị di động cũng cho phép người dùng chụp ảnh bằng camera khi sử dụng tính năng này. )

• 
  //attaching "change" event to the file upload button
  document.getElementById("file").addEventListener("change", validateFile)
  
  function validateFile(){
    const allowedExtensions =  ['jpg','png'],
          sizeLimit = 1_000_000; // 1 megabyte
  
    // destructuring file name and size from file object
    const { name:fileName, size:fileSize } = this.files[0];
  
    /*
    * if filename is apple.png, we split the string to get ["apple","png"]
    * then apply the pop() method to return the file extension
    *
    */
    const fileExtension = fileName.split(".").pop();
  
    /* 
      check if the extension of the uploaded file is included 
      in our array of allowed file extensions
    */
    if(!allowedExtensions.includes(fileExtension)){
      alert("file type not allowed");
      this.value = null;
    }else if(fileSize > sizeLimit){
      alert("file size too large")
      this.value = null;
    }
  }
  
  

  0 — chấp nhận bất kỳ thứ gì có mùi giống như tài liệu MS Word

Sử dụng thuộc tính accept thay vì kiểm tra mọi tệp theo cách thủ công rồi thêm tệp đó vào danh sách đã tăng tốc công việc của tôi. Tôi không phải báo lỗi mỗi khi thêm tệp sai và giải thích cho người dùng biết họ nên làm gì bây giờ. Tuy nhiên, tôi muốn chắc chắn 1000% rằng không có cách nào để đính kèm tệp sai trong biểu mẫu. Đúng là thuộc tính accept không cho phép người dùng chọn tệp với loại tôi không chỉ định nhưng bạn biết đấy. biểu mẫu luôn có thể bị xâm phạm với tập lệnh bên ngoài. Đây là lý do tại sao tôi quyết định thêm một bước nữa trước khi thêm tệp vào danh sách và viết chức năng kiểm tra xem loại tệp đã chọn có được bao gồm trong danh sách trắng tiện ích mở rộng mà tôi có trong ứng dụng hay không. Nếu không có - không có gì xảy ra (không cần lỗi cho người dùng vì đây chỉ là trường hợp cạnh nếu ai đó thỏa hiệp biểu mẫu). Và ứng dụng này an toàn

Làm cách nào để kiểm tra tệp được chọn hay không trong JavaScript?

Loại tệp trong JavaScript là gì?

Xác thực trong JavaScript là gì?