Đặt tệp thành tệp đầu vào JavaScript

Đối tượng Input FileUpload đại diện cho một phần tử HTML với type="file"

Truy cập một đối tượng FileUpload đầu vào

Bạn có thể truy cập một phần tử với type="file" bằng cách sử dụng getElementById[]

Mẹo. Bạn cũng có thể truy cập bằng cách tìm kiếm thông qua bộ sưu tập các thành phần của biểu mẫu

Tạo một đối tượng FileUpload đầu vào

Bạn có thể tạo một phần tử với type="file" bằng cách sử dụng tài liệu. phương thức createElement[]

Thí dụ

var x = tài liệu. createElement["INPUT"];
x. setAttribute["loại", "tệp"];

Tự mình thử »

Nhập thuộc tính đối tượng FileUpload

PropertyDescriptionacceptThiết lập hoặc trả về giá trị của thuộc tính chấp nhận của nút tải tệp lênautofocusĐặt hoặc trả về việc nút tải tệp lên có tự động lấy tiêu điểm khi tải trangdefaultValueSets hoặc trả về giá trị mặc định của nút tải tệp lên bị vô hiệu hóaSets hoặc trả về việc nút tải tệp lên có bị tắt hay khôngfilesReturns

Thuộc tính và sự kiện tiêu chuẩn

Đối tượng Input FileUpload cũng hỗ trợ các thuộc tính và sự kiện tiêu chuẩn

Trang liên quan

hướng dẫn HTML. Biểu mẫu HTML

tài liệu tham khảo HTML. thẻ HTML

tài liệu tham khảo HTML. thuộc tính loại HTML

Để đặt giá trị cho đầu vào tệp trong HTML, hãy sử dụng thuộc tính type. Nó xác định nút Duyệt để tải tệp lên bằng trường chọn tệp -

Tuy nhiên, chúng tôi không thể đặt giá trị cụ thể cho đầu vào tệp trong HTML vì lý do bảo mật. Sẽ không có gì xảy ra, ngay cả khi giả sử chúng ta đặt một giá trị như thế này -

Hãy cho chúng tôi xem một số ví dụ để tải lên một tệp và nhiều tệp với tệp loại đầu vào

Chọn tệp chỉ với một tệp

Thí dụ

Điều này cho phép người dùng chỉ tải lên một tệp duy nhất -

   
Resume
   
Upload your resume:
   
      Select a file:
      


      
   

đầu ra

Nhấp vào nút Chọn tệp để tải tệp lên -

Chúng tôi sẽ tải lên Sơ yếu lý lịch. tệp docx ở trên

Chọn tệp có nhiều tệp

Thí dụ

Điều này cho phép người dùng tải lên nhiều tệp. Đặt nhiều trong loại đầu vào và nút sẽ hiển thị Chọn tệp cho nhiều tệp –

   
Resume
   
Upload your resume:
   
      Select a file:
      


      
   

 

đầu ra

Chúng tôi nhấp vào Gửi và chọn 3 tệp như hình bên dưới –

Nhấp vào Mở và bây giờ số 3 ở gần nút Chọn tệp i. e. chúng tôi đã tải lên thành công 3 tệp -

Nhiều ứng dụng web yêu cầu đầu vào tệp để xử lý tệp trong giao diện người dùng hoặc tải chúng lên giao diện người dùng

Trong bài viết này, chúng ta sẽ xem cách thêm tệp đầu vào và sau đó xử lý tệp đã nhập bằng JavaScript

Truy cập [các] tệp đã chọn

Chúng tôi có thể truy cập các tệp từ đầu vào tệp như sau, được cung cấp HTML sau

Sau đó, chúng tôi có thể lấy tệp được chọn bằng cách viết

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

Trong đoạn mã trên, chúng tôi đã lắng nghe sự kiện thay đổi của đầu vào tệp bằng trình xử lý sự kiện. Sau đó, bên trong trình xử lý sự kiện, chúng tôi lấy tệp bằng cách truy cập thuộc tính

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

2, là một đối tượng và với khóa 0 cho tệp đầu tiên

Xử lý nhiều tệp

Chúng ta có thể tạo một đầu vào tệp chọn nhiều tệp bằng cách viết đoạn mã sau. Trong HTML, chúng tôi viết

Sau đó, trong mã JavaScript, chúng tôi viết như sau

________số 8_______

Sự khác biệt giữa ví dụ đầu tiên và ví dụ này là chúng tôi đã thêm thuộc tính

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

3 vào tệp đầu vào

Sau đó, trong trình xử lý

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

4, chúng tôi chuyển đổi đối tượng

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

2 thành một mảng với toán tử trải rộng, để thao tác các mục dễ dàng hơn

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

6 nên có một mảng các đối tượng tệp

Tự động thêm Trình nghe thay đổi

Chúng tôi cũng có thể sử dụng

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

7 để đính kèm cùng một người nghe vào tệp đầu vào như sau

const fileInput = document.getElementById['input'];const handleFiles = [] => {
  const selectedFiles = [...fileInput.files];
  console.log[selectedFiles];
}fileInput.addEventListener["change", handleFiles];

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

Chúng tôi có thể lấy các thuộc tính khác nhau từ một tệp để lấy thông tin về chúng

Chẳng hạn, chúng ta có thể lặp qua các tệp đã được chọn như sau

const fileInput = document.getElementById['input'];fileInput.onchange = [] => {
  const selectedFiles = [...fileInput.files];
  for [const f of selectedFiles] {
    console.log[f];
  }
}

Một số thuộc tính có trong một đối tượng tệp bao gồm

• const fileInput = document.getElementById['input'];
  fileInput.onchange = [] => {
    const selectedFile = fileInput.files[0];
    console.log[selectedFile];
  }

  8 — tên tệp dưới dạng chuỗi chỉ đọc. Đây chỉ là tên tệp và không có thông tin đường dẫn

• const fileInput = document.getElementById['input'];
  fileInput.onchange = [] => {
    const selectedFile = fileInput.files[0];
    console.log[selectedFile];
  }

  9 — kích thước của tệp dưới dạng số nguyên 64 bit chỉ đọc

• 0 — loại MIME của tệp dưới dạng chuỗi chỉ đọc hoặc chuỗi rỗng nếu không xác định được loại

Chẳng hạn, chúng tôi có thể hiển thị kích thước tệp của các tệp đã được tải lên như sau, với HTML sau

Chúng ta có thể hiển thị kích thước tệp của từng tệp bằng cách truy cập thuộc tính

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

9 của từng đối tượng tệp như sau

const fileInput = document.getElementById['input'];
const p = document.querySelector['p'];fileInput.onchange = [] => {
  const selectedFiles = [...fileInput.files];
  p.textContent = selectedFiles.map[s => s.size].join[', '];
}

Thuộc tính

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

9 có sẵn trong đối tượng tệp

Sử dụng các phần tử đầu vào tệp ẩn bằng cách sử dụng phương thức click[]

Chúng ta có thể kích hoạt hộp thoại chọn tệp để mở bằng phương thức

3 của đối tượng nhập tệp

Sau đó, chúng ta có thể ẩn đầu vào tệp và sử dụng một số phần tử khác để mở hộp thoại chọn đầu vào tệp

Chẳng hạn, chúng ta có thể làm điều đó như sau bằng cách viết HTML sau

Upload File

Sau đó, chúng ta có thể thêm đoạn JavaScript sau để nhấp vào đầu vào tệp để mở hộp thoại chọn tệp và lắng nghe các thay đổi đầu vào tệp như sau

Sự khác biệt duy nhất giữa các ví dụ trước và ví dụ này là chúng tôi đã thêm một phần tử nút để mở hộp thoại chọn tệp khi được nhấp bằng

const button = document.querySelector['button'];button. title = [] => {
  fileInput.click[];
}

Trình nghe đầu vào tệp hoạt động giống như các ví dụ khác

Chọn tệp bằng cách kéo và thả

Chúng tôi cũng có thể chọn tệp bằng cách kéo vào hộp bằng cách thêm trình nghe kéo và thả

Để tạo div vùng thả tệp, chúng ta có thể viết HTML sau

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

0

Sau đó, chúng ta có thể làm cho nó lớn hơn và thêm màu nền bằng CSS sau

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

1

Sau đó, trong đoạn mã JavaScript, chúng ta có thể thêm các trình xử lý sự kiện kéo và thả sau để xử lý việc thả tệp như sau

Trình xử lý

4 và

5 chỉ ở đó để ngăn chặn hành động mặc định và dừng quá trình lan truyền sự kiện

Trình xử lý

6 có logic để lấy các tệp bị loại bỏ. Thuộc tính

7 có thuộc tính

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

2, thuộc tính này có các tệp. Nó là một đối tượng giống như mảng, vì vậy chúng ta có thể trải nó thành một mảng

Phần kết luận

Chúng tôi có thể nhận các tệp với đầu vào tệp bằng cách đặt loại đầu vào thành

9. Ngoài ra, chúng ta có thể sử dụng trình nghe thả xuống để lấy các tệp được thả vào một phần tử

Đối tượng

const fileInput = document.getElementById['input'];
fileInput.onchange = [] => {
  const selectedFile = fileInput.files[0];
  console.log[selectedFile];
}

2 là một đối tượng giống như mảng có dữ liệu tệp, bao gồm tên, kích thước và loại

Làm cách nào để đặt giá trị đầu vào của tệp trong JavaScript?

Làm cách nào để đặt tên tệp trong tệp loại đầu vào bằng JQuery?

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

Làm cách nào để xử lý tệp tải lên trong JavaScript?