Tải file lên

11.1 Thẻ <input type="file">

Các ứng dụng web thường yêu cầu người dùng tải file lên server. Điều này có thể hữu ích để tải lên tài liệu, hình ảnh, video và các loại dữ liệu khác. HTML cung cấp thẻ <input type="file"> để tạo giao diện tải file lên. Dưới đây, ta sẽ xem xét chi tiết việc sử dụng thẻ này và các thuộc tính của nó như multiple và accept.

Thẻ <input type="file"> tạo ra một phần giao diện cho phép người dùng chọn file từ thiết bị của họ và tải lên server. Đây là một trong những phần tử quan trọng của form HTML, giúp tích hợp chức năng tải file lên vào ứng dụng web.

Các thuộc tính chính của thẻ <input type="file">

1. type="file" — xác định phần tử dùng để chọn file.
2. name — đặt tên cho phần tử, được sử dụng khi gửi dữ liệu form tới server.
3. multiple — cho phép người dùng chọn nhiều file cùng lúc.
4. accept — chỉ định loại file có thể chọn bằng cách sử dụng MIME-types hoặc phần mở rộng file.

Ví dụ sử dụng thẻ <input type="file">

Ví dụ đơn giản

Ví dụ đơn giản nhất của thẻ để tải file lên mà không có thuộc tính bổ sung:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="file">Chọn file:</label>
        <input type="file" id="file" name="file">
        <button type="submit">Tải lên</button>
      </form>
    
  

11.2 Thuộc tính multiple

Thẻ <input type="file"> hỗ trợ một số thuộc tính mở rộng khả năng của nó. Hãy xem xét hai thuộc tính: multiple và accept.

Thuộc tính multiple cho phép người dùng chọn nhiều file để tải lên. Khi thuộc tính này được thêm vào, người dùng có thể chọn nhiều file trong hộp thoại chọn file.

Ví dụ sử dụng:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="files">Chọn các file:</label>
        <input type="file" id="files" name="files" multiple>
        <button type="submit">Tải lên</button>
      </form>
    
  

11.3 Thuộc tính accept

Thuộc tính accept hạn chế loại file mà người dùng có thể chọn. Điều này hữu ích để đảm bảo rằng người dùng chỉ tải lên các loại file hợp lệ (ví dụ: chỉ hình ảnh hoặc tài liệu).

Ví dụ sử dụng:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Chọn hình ảnh:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <button type="submit">Tải lên</button>
      </form>
    
  

Thuộc tính accept hạn chế loại file có thể chọn. Điều này có thể thực hiện theo MIME-types hoặc phần mở rộng file. Trong ví dụ trên, người dùng chỉ có thể chọn file hình ảnh.

Ví dụ các giá trị thuộc tính accept

Hạn chế theo loại file:

• accept="image/*": tất cả các hình ảnh
• accept="video/*": tất cả các video file
• accept="audio/*": tất cả các audio file

Hạn chế theo phần mở rộng file:

• accept=".jpg/.jpeg/.png": chỉ hình ảnh JPEG và PNG
• accept=".pdf/.doc/.docx": chỉ tài liệu PDF và Word

11.4 Xử lý file phía client

Đôi khi cần xử lý file trước khi gửi chúng lên server. Ví dụ, bạn có thể hiển thị bản xem trước hình ảnh hoặc kiểm tra kích thước file. JavaScript được sử dụng cho việc này.

Ví dụ bản xem trước hình ảnh:

    
      <form action="/upload" method="post" enctype="multipart/form-data">
        <label for="image">Chọn hình ảnh:</label>
        <input type="file" id="image" name="image" accept="image/*">
        <div id="preview"></div>
        <button type="submit">Tải lên</button>
      </form>
    
  

    
      document.getElementById('image').addEventListener('change', function(event) {
        const preview = document.getElementById('preview');
        preview.innerHTML = '';

        const files = event.target.files;

        for (let i = 0; i < files.length; i++) {
          const file = files[i];
          const reader = new FileReader();

          reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.maxWidth = '200px';
            preview.appendChild(img);
          }
          reader.readAsDataURL(file);
        }
      });
    
  

Giải thích

• FileReader: được sử dụng để đọc nội dung của file trên phía client
• reader.onload: sự kiện kích hoạt khi file được đọc xong
• reader.readAsDataURL(file): phương thức đọc file và mã hóa nó dưới dạng Data URL, cho phép hiển thị nó trong thẻ <img>

1

Khảo sát/đố vui

, cấp độ , bài học

Không có sẵn

Các thành phần của form

Các thành phần của form

Mở