Hướng dẫn how do i accept an image in html? - làm cách nào để chấp nhận một hình ảnh trong html?

Thử nó

Giá trị

Thuộc tính ____20 của tệp đầu vào chứa một chuỗi đại diện cho đường dẫn đến (các) tệp đã chọn. Nếu chưa chọn tệp, giá trị là một chuỗi trố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>

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ử

<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>

Chấp nhận

Giá trị thuộc tính

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

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" accept="image/*,.pdf" />

<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

<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>

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

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

Lưu ý:

<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>

nhiều

Khi thuộc tính

div {
  margin-bottom: 10px;
}

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.

div { margin-bottom: 10px; } 4

Thuộc tính Boolean

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

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

div {
  margin-bottom: 10px;
}

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ử

<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>

<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>

• 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ụ:

  <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>
  

  0,

  <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>
  

  1 hoặ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>
  

  2.
• Một chuỗi loại MIME hợp lệ, không có phần mở rộng.
• Chuỗ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>
  

  3 có nghĩa là "bất kỳ tệp âm thanh nào".
• Chuỗ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>
  

  4 có nghĩa là "bất kỳ tệp video".
• Chuỗ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 có nghĩa là "bất kỳ tệp hình ảnh" nào.

Thuộc tính

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

<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

div {
  margin-bottom: 10px;
}

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

div {
  margin-bottom: 10px;
}

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

<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;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

Mỗi đối tượng

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

Tên của tập tin.

div {
  margin-bottom: 10px;
}

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).

div {
  margin-bottom: 10px;
}

Một đối tượng

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

const input = document.querySelector("input[type=file]");
input.value = "foo";

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

const input = document.querySelector("input[type=file]");
input.value = "foo";

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

const input = document.querySelector("input[type=file]");
input.value = "foo";

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

<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;
}

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

<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>

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

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

• const input = document.querySelector("input[type=file]");
  input.value = "foo";
  

  8 hoặc

  const input = document.querySelector("input[type=file]");
  input.value = "foo";
  

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

• <form method="post" enctype="multipart/form-data">
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple />
    div>
    <div class="preview">
      <p>No files currently selected for uploadp>
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  0 hoặc

  <form method="post" enctype="multipart/form-data">
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple />
    div>
    <div class="preview">
      <p>No files currently selected for uploadp>
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

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

• <form method="post" enctype="multipart/form-data">
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple />
    div>
    <div class="preview">
      <p>No files currently selected for uploadp>
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  2 - Chấp nhận bất kỳ tệp nào có loạ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 MIME. (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.)

• <form method="post" enctype="multipart/form-data">
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple />
    div>
    <div class="preview">
      <p>No files currently selected for uploadp>
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

  4 - 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ị

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

Thuộc tính

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

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

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

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:

   const input = document.querySelector("input[type=file]");
   input.value = "foo";
   

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="image_uploads">Choose images to upload (PNG, JPG)label>
       <input
         type="file"
         id="image_uploads"
         name="image_uploads"
         accept=".jpg, .jpeg, .png"
         multiple />
     div>
     <div class="preview">
       <p>No files currently selected for uploadp>
     div>
     <div>
       <button>Submitbutton>
     div>
   form>
   

   8, đường dẫn thực đến tệp nguồn không được hiển thị trong thuộc tính ____2020 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

   html {
     font-family: sans-serif;
   }
   
   form {
     width: 580px;
     background: #ccc;
     margin: 0 auto;
     padding: 20px;
     border: 1px solid black;
   }
   
   form ol {
     padding-left: 0;
   }
   
   form li,
   div > p {
     background: #eee;
     display: flex;
     justify-content: space-between;
     margin-bottom: 10px;
     list-style-type: none;
     border: 1px solid black;
   }
   
   form img {
     height: 64px;
     order: 1;
   }
   
   form p {
     line-height: 32px;
     padding-left: 10px;
   }
   
   form label,
   form button {
     background-color: #7f9ccb;
     padding: 5px 10px;
     border-radius: 5px;
     border: 1px ridge black;
     font-size: 0.8rem;
     height: auto;
   }
   
   form label:hover,
   form button:hover {
     background-color: #2d5ba3;
     color: white;
   }
   
   form label:active,
   form button:active {
     background-color: #0d3f8f;
     color: white;
   }
   

   0 được 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

<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>

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:

<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image_uploads">Choose images to upload (PNG, JPG)label>
    <input
      type="file"
      id="image_uploads"
      name="image_uploads"
      accept=".jpg, .jpeg, .png"
      multiple />
  div>
  <div class="preview">
    <p>No files currently selected for uploadp>
  div>
  <div>
    <button>Submitbutton>
  div>
form>

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

Đ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 tham chiếu đến chính đầu vào biểu mẫu và phần tử

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

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

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

Lưu ý:

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

html {
  font-family: sans-serif;
}

form {
  width: 580px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

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

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

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

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

const input = document.querySelector('input');
const preview = document.querySelector('.preview');

input.style.opacity = 0;

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

  const input = document.querySelector('input');
  const preview = document.querySelector('.preview');
  
  input.style.opacity = 0;
  

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

  html {
    font-family: sans-serif;
  }
  
  form {
    width: 580px;
    background: #ccc;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid black;
  }
  
  form ol {
    padding-left: 0;
  }
  
  form li,
  div > p {
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid black;
  }
  
  form img {
    height: 64px;
    order: 1;
  }
  
  form p {
    line-height: 32px;
    padding-left: 10px;
  }
  
  form label,
  form button {
    background-color: #7f9ccb;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px ridge black;
    font-size: 0.8rem;
    height: auto;
  }
  
  form label:hover,
  form button:hover {
    background-color: #2d5ba3;
    color: white;
  }
  
  form label:active,
  form button:active {
    background-color: #0d3f8f;
    color: white;
  }
  

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

  div {
    margin-bottom: 10px;
  }
  

  1 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à

  const input = document.querySelector('input');
  const preview = document.querySelector('.preview');
  
  input.style.opacity = 0;
  

  6.
• Kiểm tra xem nếu không có tệp nào được chọn, bằng cách kiểm tra xem

  const input = document.querySelector('input');
  const preview = document.querySelector('.preview');
  
  input.style.opacity = 0;
  

  7 có bằng 0. Nếu vậy, hãy in một thông báo vào bản xem trước

  html {
    font-family: sans-serif;
  }
  
  form {
    width: 580px;
    background: #ccc;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid black;
  }
  
  form ol {
    padding-left: 0;
  }
  
  form li,
  div > p {
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid black;
  }
  
  form img {
    height: 64px;
    order: 1;
  }
  
  form p {
    line-height: 32px;
    padding-left: 10px;
  }
  
  form label,
  form button {
    background-color: #7f9ccb;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px ridge black;
    font-size: 0.8rem;
    height: auto;
  }
  
  form label:hover,
  form button:hover {
    background-color: #2d5ba3;
    color: white;
  }
  
  form label:active,
  form button:active {
    background-color: #0d3f8f;
    color: white;
  }
  

  2 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

  html {
    font-family: sans-serif;
  }
  
  form {
    width: 580px;
    background: #ccc;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid black;
  }
  
  form ol {
    padding-left: 0;
  }
  
  form li,
  div > p {
    background: #eee;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    list-style-type: none;
    border: 1px solid black;
  }
  
  form img {
    height: 64px;
    order: 1;
  }
  
  form p {
    line-height: 32px;
    padding-left: 10px;
  }
  
  form label,
  form button {
    background-color: #7f9ccb;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px ridge black;
    font-size: 0.8rem;
    height: auto;
  }
  
  form label:hover,
  form button:hover {
    background-color: #2d5ba3;
    color: white;
  }
  
  form label:active,
  form button:active {
    background-color: #0d3f8f;
    color: white;
  }
  

  2. Những điều cần lưu ý ở đây:
• Chúng tôi sử dụng hàm

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

  00 tùy chỉnh để 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

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

  4).
• 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

    html {
      font-family: sans-serif;
    }
    
    form {
      width: 580px;
      background: #ccc;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid black;
    }
    
    form ol {
      padding-left: 0;
    }
    
    form li,
    div > p {
      background: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      list-style-type: none;
      border: 1px solid black;
    }
    
    form img {
      height: 64px;
      order: 1;
    }
    
    form p {
      line-height: 32px;
      padding-left: 10px;
    }
    
    form label,
    form button {
      background-color: #7f9ccb;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px ridge black;
      font-size: 0.8rem;
      height: auto;
    }
    
    form label:hover,
    form button:hover {
      background-color: #2d5ba3;
      color: white;
    }
    
    form label:active,
    form button:active {
      background-color: #0d3f8f;
      color: white;
    }
    

    2 trước đó (thu được từ

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

    03 và

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

    04). Hàm

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

    05 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 bản xem trước hình thu nhỏ của hình ảnh bằng cách gọi

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

    06. Sau đó, chèn hình ảnh vào mục danh sách bằng cách tạo một

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

    07 mới và đặt

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

    08 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.

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

Hàm

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

div {
  margin-bottom: 10px;
}

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

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

const input = document.querySelector("input[type=file]");
input.value = "foo";

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

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

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

Hàm

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

const input = document.querySelector("input[type=file]");
input.value = "foo";

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

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="image_uploads">Choose images to upload (PNG, JPG)label>
      <input
        type="file"
        id="image_uploads"
        name="image_uploads"
        accept=".jpg, .jpeg, .png"
        multiple />
    div>
    <div class="preview">
      <p>No files currently selected for uploadp>
    div>
    <div>
      <button>Submitbutton>
    div>
  form>
  

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