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 [

  
    Choose file to upload
    
  
  
    Submit
  

  
    Choose file to upload
    
  
  
    Submit
  

  
    Choose file to upload
    
  
  
    Submit
  

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ử

  
    Choose file to upload
    
  
  
    Submit
  

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

chiếm lấy

Giá trị thuộc tính

  
    Choose file to upload
    
  
  
    Submit
  

div {
  margin-bottom: 10px;
}

div {
  margin-bottom: 10px;
}

Lưu ý:

  
    Choose file to upload
    
  
  
    Submit
  

  
    Choose file to upload
    
  
  
    Submit
  

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ử

  
    Choose file to upload
    
  
  
    Submit
  

  
    Choose file to upload
    
  
  
    Submit
  

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

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

  0,

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

  1 hoặc

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

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

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

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

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

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

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

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

Thuộc tính

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

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

  
    Choose file to upload
    
  
  
    Submit
  

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

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

  
    Choose file to upload
    
  
  
    Submit
  

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

  
    Choose file to upload
    
  
  
    Submit
  

div {
  margin-bottom: 10px;
}

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

  
    Choose file to upload
    
  
  
    Submit
  

  
    Choose file to upload
    
  
  
    Submit
  

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

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

• 
    
      Choose images to upload [PNG, JPG]
      
    
    
      No files currently selected for upload
    
    
      Submit
    
  
  

  0 hoặc

  
    
      Choose images to upload [PNG, JPG]
      
    
    
      No files currently selected for upload
    
    
      Submit
    
  
  

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

• 
    
      Choose images to upload [PNG, JPG]
      
    
    
      No files currently selected for upload
    
    
      Submit
    
  
  

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

  
    
      Choose file to upload
      
    
    
      Submit
    
  
  

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

• 
    
      Choose images to upload [PNG, JPG]
      
    
    
      No files currently selected for upload
    
    
      Submit
    
  
  

  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:

  
    Choose file to upload
    
  
  
    Submit
  

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:

   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

   
     
       Choose images to upload [PNG, JPG]
       
     
     
       No files currently selected for upload
     
     
       Submit
     
   
   

   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

  
    Choose file to upload
    
  
  
    Submit
  

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:

  
    Choose images to upload [PNG, JPG]
    
  
  
    No files currently selected for upload
  
  
    Submit
  

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

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;

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
  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
  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ừ
    03 và
    04]. Hàm
    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
    06. Sau đó, chèn hình ảnh vào mục danh sách bằng cách tạo một
    07 mới và đặt
    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.

Hàm

div {
  margin-bottom: 10px;
}

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

Hàm

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

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

  
    
      Choose images to upload [PNG, JPG]
      
    
    
      No files currently selected for upload
    
    
      Submit
    
  
  

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