Hướng dẫn how to restrict file upload type in javascript? - làm thế nào để hạn chế loại tải lên tệp trong javascript?

Thử nó

Giá trị

Thuộc tính

Thuộc tính bổ sung

Ngoài các thuộc tính phổ biến được chia sẻ bởi tất cả các phần tử

Chấp nhận

Giá trị thuộc tính

Chẳng hạn, có một số cách có thể xác định được các tệp Microsoft Word, do đó, một trang web chấp nhận các tệp Word có thể sử dụng

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

chiếm lấy

Giá trị thuộc tính

Lưu ý:

nhiều

Khi thuộc tính boolean

Các thuộc tính không chuẩn

Ngoài các thuộc tính được liệt kê ở trên, các thuộc tính không chuẩn sau đây có sẵn trên một số trình duyệt. Bạn nên cố gắng tránh sử dụng chúng khi có thể, vì làm như vậy sẽ hạn chế khả năng mã của bạn hoạt động trong các trình duyệt không thực hiện chúng.

9

Thuộc tính Boolean

<input
  type="file"
  id="docpicker"
  accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />

Mặc dù ban đầu chỉ được triển khai cho các trình duyệt dựa trên WebKit,

Trình xác định loại tệp duy nhất

Trình xác định loại tệp duy nhất là một chuỗi mô tả một loại tệp có thể được người dùng chọn trong phần tử

• Một tiện ích mở rộng tên tệp không nhạy cảm trường hợp hợp lệ, bắt đầu với một ký tự khoảng thời gian ("."). Ví dụ:

  <input
    type="file"
    id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
  

  5,

  <input
    type="file"
    id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
  

  6 hoặc

  <input
    type="file"
    id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
  

  7.
• Một chuỗi loại MIME hợp lệ, không có phần mở rộng.
• Chuỗi

  <input
    type="file"
    id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
  

  8 có nghĩa là "bất kỳ tệp âm thanh nào".
• Chuỗi

  <input
    type="file"
    id="docpicker"
    accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" />
  

  9 có nghĩa là "bất kỳ tệp video".
• Chuỗi

  <input type="file" accept="image/*,.pdf" />
  

  0 có nghĩa là "bất kỳ tệp hình ảnh" nào.

Thuộc tính

<input type="file" accept="image/*,.pdf" />

Sử dụng đầu vào tệp

Một ví dụ cơ bản

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
}

Điều này tạo ra đầu ra sau:

Bất kể thiết bị hoặc hệ điều hành của người dùng, đầu vào tệp cung cấp một nút mở hộp thoại Picker Picker cho phép người dùng chọn tệp.

Bao gồm thuộc tính

Nhận thông tin về các tệp đã chọn

Các tệp đã chọn 'được trả về bởi thuộc tính

<input type="file" accept="image/*,.pdf" />

<input type="file" accept="image/*,.pdf" />

<input type="file" accept="image/*,.pdf" />

<input type="file" accept="image/*,.pdf" />

Mỗi đối tượng

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Tên của tập tin.

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Một số chỉ định ngày và thời gian mà tệp được sửa đổi lần cuối, tính bằng mili giây kể từ thời đại Unix (ngày 1 tháng 1 năm 1970 lúc nửa đêm).

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Một đối tượng

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Kích thước của tệp trong byte.

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Loại MIME của tập tin.

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Một chuỗi chỉ định đường dẫn của tệp so với thư mục cơ sở được chọn trong trình chọn thư mục (nghĩa là bộ chọn

Lưu ý: Bạn có thể đặt cũng như nhận được giá trị của

Giới hạn các loại tệp được chấp nhận

Thường thì bạn sẽ không muốn người dùng có thể chọn bất kỳ loại tệp tùy ý nào; Thay vào đó, bạn thường muốn họ chọn các tệp thuộc loại hoặc loại cụ thể. Ví dụ: nếu đầu vào tệp của bạn cho phép người dùng tải lên ảnh hồ sơ, bạn có thể muốn họ chọn các định dạng hình ảnh tương thích web, chẳng hạn như JPEG hoặc PNG.

Các loại tệp có thể chấp nhận có thể được chỉ định với thuộc tính

• div {
    margin-bottom: 10px;
  }
  

  3 hoặc

  div {
    margin-bottom: 10px;
  }
  

  4 - Chấp nhận các tệp PNG.

• div {
    margin-bottom: 10px;
  }
  

  5 hoặc

  div {
    margin-bottom: 10px;
  }
  

  6 - Chấp nhận các tệp PNG hoặc JPEG.

• div {
    margin-bottom: 10px;
  }
  

  7 - Chấp nhận bất kỳ tệp nào có loại MIME

  <input type="file" accept="image/*,.pdf" />
  

  0. (Nhiều thiết bị di động cũng cho phép người dùng chụp ảnh bằng máy ảnh khi nó được sử dụng.)

• div {
    margin-bottom: 10px;
  }
  

  9 - Chấp nhận bất cứ thứ gì có mùi giống như một tài liệu MS Word.

Hãy xem xét một ví dụ đầy đủ hơn:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
}

Điều này tạo ra một đầu ra trông tương tự với ví dụ trước:

Nó có thể trông giống nhau, nhưng nếu bạn thử chọn một tệp có đầu vào này, bạn sẽ thấy trình chọn tệp chỉ cho phép bạn chọn các loại tệp được chỉ định trong giá trị

Thuộc tính

Do đó, bạn nên đảm bảo rằng thuộc tính

Ghi chú

1. Bạn không thể đặt giá trị của trình chọn tệp từ tập lệnh - làm một cái gì đó như sau không có hiệu lực:
   0

2. Khi một tệp được chọn bằng cách sử dụng

   <form method="post" enctype="multipart/form-data">
     <div>
       <label for="profile_pic">Choose file to uploadlabel>
       <input
         type="file"
         id="profile_pic"
         name="profile_pic"
         accept=".jpg, .jpeg, .png" />
     div>
     <div>
       <button>Submitbutton>
     div>
   form>
   

   3, đường dẫn thực đến tệp nguồn không được hiển thị trong thuộc tính
   5 của đầu vào vì lý do bảo mật rõ ràng. Thay vào đó, tên tệp được hiển thị, với

   <form method="post" enctype="multipart/form-data">
     <div>
       <label for="profile_pic">Choose file to uploadlabel>
       <input
         type="file"
         id="profile_pic"
         name="profile_pic"
         accept=".jpg, .jpeg, .png" />
     div>
     <div>
       <button>Submitbutton>
     div>
   form>
   

   5 đã chuẩn bị cho nó. Có một số lý do lịch sử cho sự khó hiểu này, nhưng nó được hỗ trợ trên tất cả các trình duyệt hiện đại, và trên thực tế được xác định trong thông số kỹ thuật.

Ví dụ

Trong ví dụ này, chúng tôi sẽ trình bày một trình chọn tệp nâng cao hơn một chút, tận dụng thông tin tệp có sẵn trong thuộc tính

Lưu ý: Bạn có thể thấy mã nguồn đầy đủ cho ví dụ này trên GitHub-File-example.html (xem nó cũng trực tiếp). Chúng tôi sẽ không giải thích CSS; JavaScript là trọng tâm chính. You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won't explain the CSS; the JavaScript is the main focus.

Trước hết, chúng ta hãy nhìn vào HTML:

Điều này tương tự như những gì chúng ta đã thấy trước đây - không có gì đặc biệt để bình luận.

Tiếp theo, hãy đi qua JavaScript.

Trong các dòng đầu tiên của tập lệnh, chúng tôi nhận được các tài liệu tham khảo cho chính đầu vào biểu mẫu và phần tử

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile_pic">Choose file to uploadlabel>
    <input
      type="file"
      id="profile_pic"
      name="profile_pic"
      accept=".jpg, .jpeg, .png" />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

div {
  margin-bottom: 10px;
}

Lưu ý:

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

Tiếp theo, chúng tôi thêm một trình nghe sự kiện vào đầu vào để lắng nghe các thay đổi đối với giá trị đã chọn của nó (trong trường hợp này, khi các tệp được chọn). Người nghe sự kiện gọi chức năng

div {
  margin-bottom: 10px;
}

Bất cứ khi nào hàm

div {
  margin-bottom: 10px;
}

• Sử dụng vòng lặp

  div {
    margin-bottom: 10px;
  }
  

  8 để làm trống các nội dung trước đó của bản xem trước

  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="profile_pic">Choose file to uploadlabel>
      <input
        type="file"
        id="profile_pic"
        name="profile_pic"
        accept=".jpg, .jpeg, .png" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  7.
• Lấy đối tượng

  <input type="file" accept="image/*,.pdf" />
  

  6 chứa thông tin trên tất cả các tệp đã chọn và lưu trữ nó trong một biến có tên là
  01.
• Kiểm tra xem nếu không có tệp nào được chọn, bằng cách kiểm tra xem
  02 có bằng 0. Nếu vậy, hãy in một thông báo vào bản xem trước

  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="profile_pic">Choose file to uploadlabel>
      <input
        type="file"
        id="profile_pic"
        name="profile_pic"
        accept=".jpg, .jpeg, .png" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  7 nói rằng không có tệp nào được chọn.
• Nếu các tệp đã được chọn, chúng tôi lặp qua từng cái, in thông tin về nó vào bản xem trước

  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="profile_pic">Choose file to uploadlabel>
      <input
        type="file"
        id="profile_pic"
        name="profile_pic"
        accept=".jpg, .jpeg, .png" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  7. Những điều cần lưu ý ở đây:
• Chúng tôi sử dụng chức năng tùy chỉnh ____105 để kiểm tra xem tệp có đúng loại không (ví dụ: các loại hình ảnh được chỉ định trong thuộc tính
  1).
• Nếu có, chúng tôi:
  • In ra tên và kích thước tệp của nó thành một mục danh sách bên trong

    <form method="post" enctype="multipart/form-data">
      <div>
        <label for="profile_pic">Choose file to uploadlabel>
        <input
          type="file"
          id="profile_pic"
          name="profile_pic"
          accept=".jpg, .jpeg, .png" />
      div>
      <div>
        <button>Submitbutton>
      div>
    form>
    

    7 trước đó (thu được từ
    08 và
    09). Hàm
    10 tùy chỉnh trả về một phiên bản được định dạng độc đáo có kích thước tính bằng byte/kb/mb (theo mặc định, trình duyệt báo cáo kích thước bằng byte tuyệt đối).
  • Tạo một bản xem trước hình thu nhỏ của hình ảnh bằng cách gọi
    11. Sau đó, chèn hình ảnh vào mục danh sách bằng cách tạo một
    12 mới và đặt
    13 của nó thành hình thu nhỏ.
• Nếu loại tệp không hợp lệ, chúng tôi hiển thị một thông báo bên trong mục danh sách nói với người dùng rằng họ cần chọn loại tệp khác.

Hàm

<input type="file" accept="image/*,.pdf" />

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Hàm

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to uploadlabel>
    <input type="file" id="file" name="file" multiple />
  div>
  <div>
    <button>Submitbutton>
  div>
form>

Ví dụ trông như thế này; Có một vở kịch:

Xem thêm

• Sử dụng các tệp từ các ứng dụng web - chứa một số ví dụ hữu ích khác liên quan đến

  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="profile_pic">Choose file to uploadlabel>
      <input
        type="file"
        id="profile_pic"
        name="profile_pic"
        accept=".jpg, .jpeg, .png" />
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  3 và API tệp.
• Khả năng tương thích của các thuộc tính CSS