Sử dụng API tệp, nội dung web có thể yêu cầu người dùng chọn các tệp cục bộ và sau đó đọc nội dung của các tệp đó. Lựa chọn này có thể được thực hiện bằng cách sử dụng phần tử HTML
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
4 hoặc bằng cách kéo và thảTruy cập [các] tệp đã chọn
Hãy xem xét HTML này
API tệp cho phép truy cập một đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
5 chứa const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 đại diện cho các tệp do người dùng chọnThuộc tính
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
7 trên phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
8 cho phép người dùng chọn nhiều tệpTruy cập tệp được chọn đầu tiên bằng bộ chọn DOM cổ điển
const selectedFile = document.getElementById['input'].files[0];
Truy cập [các] tệp đã chọn trong một sự kiện thay đổi
Cũng có thể [nhưng không bắt buộc] truy cập vào
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
5 thông qua sự kiện const numFiles = fileList.length;
0. Bạn cần sử dụng const numFiles = fileList.length;
1 để thêm trình lắng nghe sự kiện const numFiles = fileList.length;
0, như thế nàyconst inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
Nhận thông tin về [các] tệp đã chọn
Đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
5 do DOM cung cấp liệt kê tất cả các tệp được người dùng chọn, mỗi tệp được chỉ định là đối tượng const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6. Bạn có thể xác định có bao nhiêu tệp mà người dùng đã chọn bằng cách kiểm tra giá trị của thuộc tính const numFiles = fileList.length;
5 của danh sách tệp________số 8
Các đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 riêng lẻ có thể được truy xuất bằng cách truy cập danh sách dưới dạng một mảng
7Vòng lặp này lặp qua tất cả các tệp trong danh sách tệp
Có ba thuộc tính được cung cấp bởi đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 chứa thông tin hữu ích về tệpconst numFiles = fileList.length;
8Tên tệp dưới dạng chuỗi chỉ đọc. Đây chỉ là tên tệp và không bao gồm bất kỳ thông tin đường dẫn nào
const numFiles = fileList.length;
9Kích thước của tệp tính bằng byte dưới dạng số nguyên 64 bit chỉ đọc
70Loại MIME của tệp dưới dạng chuỗi chỉ đọc hoặc
71 nếu không xác định được loạiVí dụ. Hiển thị [các] kích thước tệp
Ví dụ sau đây cho thấy khả năng sử dụng thuộc tính
const numFiles = fileList.length;
9const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
4Sử dụng các phần tử đầu vào tệp ẩn bằng phương thức click[]
Bạn có thể ẩn phần tử tệp
73 xấu xí được thừa nhận và hiển thị giao diện của riêng bạn để mở bộ chọn tệp và hiển thị tệp hoặc tệp mà người dùng đã chọn. Bạn có thể làm điều này bằng cách tạo kiểu cho phần tử đầu vào bằng
74 và gọi phương thức
75 trên phần tử
73Hãy xem xét HTML này
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
9Mã xử lý sự kiện
77 có thể trông như thế nàyconst inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
1Bạn có thể tạo kiểu cho
78 theo cách bạn muốnSử dụng phần tử nhãn để kích hoạt phần tử đầu vào tệp ẩn
Để cho phép mở bộ chọn tệp mà không cần sử dụng JavaScript [phương thức click[]], có thể sử dụng phần tử
79. Lưu ý rằng trong trường hợp này, không được ẩn phần tử đầu vào bằng cách sử dụng const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
40 [hoặc const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
41], nếu không, nhãn sẽ không thể truy cập được bằng bàn phím. Thay vào đó, hãy sử dụng kỹ thuật ẩn trực quanHãy xem xét HTML này
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6và CSS này
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
7Không cần thêm mã JavaScript để gọi
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
42. Ngoài ra, trong trường hợp này, bạn có thể tạo kiểu cho thành phần nhãn theo ý muốn. Bạn cần cung cấp một gợi ý trực quan về trạng thái tiêu điểm của trường nhập ẩn trên nhãn của nó, có thể là đường viền như minh họa ở trên hoặc màu nền hoặc bóng hộp. [Tại thời điểm viết bài này, Firefox không hiển thị gợi ý trực quan này cho các phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
43. ]Chọn tệp bằng cách kéo và thả
Bạn cũng có thể cho phép người dùng kéo và thả tệp vào ứng dụng web của mình
Bước đầu tiên là thiết lập một khu vực thả. Chính xác phần nào trong nội dung của bạn sẽ chấp nhận sự sụt giảm có thể khác nhau tùy thuộc vào thiết kế của ứng dụng của bạn, nhưng việc tạo một phần tử nhận sự kiện giảm là dễ dàng
const selectedFile = document.getElementById['input'].files[0];
0Trong ví dụ này, chúng tôi đang chuyển phần tử có ID
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
44 vào vùng thả của chúng tôi. Điều này được thực hiện bằng cách thêm người nghe cho các sự kiện const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
45, const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
46 và const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
47Chúng tôi thực sự không cần phải làm bất cứ điều gì với các sự kiện
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
45 và const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
46 trong trường hợp của chúng tôi, vì vậy cả hai chức năng này đều đơn giản. Họ chỉ dừng truyền bá sự kiện và ngăn hành động mặc định xảy raconst selectedFile = document.getElementById['input'].files[0];
1Điều kỳ diệu thực sự xảy ra trong hàm
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
90const selectedFile = document.getElementById['input'].files[0];
2Ở đây, chúng tôi truy xuất trường
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
91 từ sự kiện, kéo danh sách tệp ra khỏi đó rồi chuyển trường đó tới const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
92. Kể từ thời điểm này, việc xử lý các tệp là như nhau cho dù người dùng sử dụng phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
8 hay kéo và thảVí dụ. Hiển thị hình thu nhỏ của hình ảnh do người dùng chọn
Giả sử bạn đang phát triển trang web chia sẻ ảnh tuyệt vời tiếp theo và muốn sử dụng HTML để hiển thị bản xem trước hình thu nhỏ của hình ảnh trước khi người dùng thực sự tải chúng lên. Bạn có thể thiết lập phần tử đầu vào hoặc vùng thả của mình như đã thảo luận trước đó và yêu cầu họ gọi một hàm, chẳng hạn như hàm
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
92 bên dướiconst selectedFile = document.getElementById['input'].files[0];
3Ở đây, vòng lặp của chúng tôi xử lý các tệp do người dùng chọn sẽ xem xét thuộc tính
70 của từng tệp để xem liệu loại MIME của nó có bắt đầu bằng chuỗi "const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
96"]. Đối với mỗi tệp là một hình ảnh, chúng tôi tạo một phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
97 mới. CSS có thể được sử dụng để thiết lập bất kỳ đường viền hoặc bóng đẹp nào và để chỉ định kích thước của hình ảnh, do đó không cần phải thực hiện ở đâyMỗi hình ảnh có lớp CSS
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
98 được thêm vào, giúp dễ dàng tìm thấy trong cây DOM. Chúng tôi cũng thêm thuộc tính const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
99 cho mỗi hình ảnh chỉ định const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 cho hình ảnh; . Chúng tôi sử dụng const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
11 để thêm hình thu nhỏ mới vào khu vực xem trước của tài liệu của chúng tôiTiếp theo, chúng tôi thiết lập
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
12 để xử lý tải hình ảnh không đồng bộ và gắn nó vào phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
97. Sau khi tạo đối tượng const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
12 mới, chúng tôi thiết lập chức năng const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
15 của nó và sau đó gọi const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
16 để bắt đầu thao tác đọc trong nền. Khi toàn bộ nội dung của tệp hình ảnh được tải, chúng sẽ được chuyển đổi thành một URL const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
17 được chuyển đến hàm gọi lại const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
15. Việc triển khai quy trình này của chúng tôi đặt thuộc tính const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
60 của phần tử const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
97 thành hình ảnh được tải, dẫn đến hình ảnh xuất hiện trong hình thu nhỏ trên màn hình của người dùngSử dụng URL đối tượng
Các phương thức DOM
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
61 và const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
62 cho phép bạn tạo các chuỗi URL đơn giản có thể được sử dụng để tham chiếu bất kỳ dữ liệu nào có thể được tham chiếu bằng đối tượng DOM const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6, bao gồm các tệp cục bộ trên máy tính của người dùngKhi bạn có một đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 mà bạn muốn tham chiếu bằng URL từ HTML, bạn có thể tạo một URL đối tượng cho nó như thế nàyconst selectedFile = document.getElementById['input'].files[0];
4URL đối tượng là một chuỗi xác định đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6. Mỗi khi bạn gọi const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
61, một URL đối tượng duy nhất sẽ được tạo ngay cả khi bạn đã tạo một URL đối tượng cho tệp đó rồi. Mỗi trong số này phải được phát hành. Mặc dù chúng được giải phóng tự động khi tài liệu được tải xuống, nhưng nếu trang của bạn sử dụng chúng một cách linh hoạt, bạn nên giải phóng chúng một cách rõ ràng bằng cách gọi const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
62const selectedFile = document.getElementById['input'].files[0];
5Ví dụ. Sử dụng URL đối tượng để hiển thị hình ảnh
Ví dụ này sử dụng URL đối tượng để hiển thị hình thu nhỏ của hình ảnh. Ngoài ra, nó còn hiển thị thông tin tệp khác bao gồm tên và kích thước của chúng
HTML trình bày giao diện trông như thế này
const selectedFile = document.getElementById['input'].files[0];
6Điều này thiết lập phần tử
73 tệp của chúng tôi cũng như một liên kết gọi bộ chọn tệp [vì chúng tôi ẩn đầu vào tệp để ngăn giao diện người dùng kém hấp dẫn đó hiển thị]. Điều này được giải thích trong phần Sử dụng các phần tử đầu vào tệp ẩn bằng phương thức click[], cũng như phương thức gọi bộ chọn tệpPhương pháp
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
92 sauconst selectedFile = document.getElementById['input'].files[0];
7Điều này bắt đầu bằng cách tìm nạp URL của
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
70 với ID const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
71. Đây là khối mà chúng tôi sẽ chèn danh sách tệp của mình, bao gồm cả hình thu nhỏNếu đối tượng
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
5 được chuyển đến const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
92 là const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
74, chúng tôi đặt HTML bên trong của khối để hiển thị "Không có tệp nào được chọn. ". Mặt khác, chúng tôi bắt đầu xây dựng danh sách tệp của mình, như sau- Một phần tử danh sách không có thứ tự mới [
75] được tạoconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
- Phần tử danh sách mới được chèn vào khối
70 bằng cách gọi phương thứcconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
11 của nóconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
- Đối với mỗi
6 trongconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
5 được đại diện bởiconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
00const selectedFile = document.getElementById['input'].files[0];
- Tạo một phần tử danh sách mới [
01] và chèn nó vào danh sáchconst selectedFile = document.getElementById['input'].files[0];
- Tạo phần tử hình ảnh mới [
02]const selectedFile = document.getElementById['input'].files[0];
- Đặt nguồn của hình ảnh thành URL đối tượng mới đại diện cho tệp, sử dụng
61 để tạo URL blobconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
- Đặt chiều cao của hình ảnh thành 60 pixel
- Thiết lập trình xử lý sự kiện tải của hình ảnh để giải phóng URL đối tượng vì nó không còn cần thiết sau khi hình ảnh đã được tải. Điều này được thực hiện bằng cách gọi phương thức
62 và chuyển vào chuỗi URL đối tượng như được chỉ định bởiconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
05const selectedFile = document.getElementById['input'].files[0];
- Nối mục danh sách mới vào danh sách
- Tạo một phần tử danh sách mới [
Đây là bản demo trực tiếp của đoạn mã trên
Ví dụ. Tải lên tệp do người dùng chọn
Một điều khác bạn có thể muốn làm là cho phép người dùng tải tệp hoặc tệp đã chọn [chẳng hạn như hình ảnh được chọn bằng ví dụ trước] lên máy chủ. Điều này có thể được thực hiện không đồng bộ rất dễ dàng
Tạo các tác vụ tải lên
Tiếp tục với đoạn mã đã tạo hình thu nhỏ trong ví dụ trước, hãy nhớ lại rằng mọi hình ảnh thu nhỏ đều thuộc lớp CSS
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
98 với const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
6 tương ứng được đính kèm trong thuộc tính const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
99. Điều này cho phép chúng tôi chọn tất cả các hình ảnh mà người dùng đã chọn để tải lên bằng cách sử dụng const selectedFile = document.getElementById['input'].files[0];
09, như thế nàyconst selectedFile = document.getElementById['input'].files[0];
8Dòng 2 tìm nạp một
const selectedFile = document.getElementById['input'].files[0];
10, được gọi là const selectedFile = document.getElementById['input'].files[0];
11, của tất cả các thành phần trong tài liệu với lớp CSS const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
98. Trong trường hợp của chúng tôi, đây sẽ là tất cả các hình thu nhỏ của hình ảnh. Khi chúng tôi có danh sách đó, việc lướt qua nó và tạo một phiên bản const selectedFile = document.getElementById['input'].files[0];
13 mới cho mỗi. Mỗi trong số này xử lý tải lên tệp tương ứngXử lý quá trình tải lên cho một tập tin
Hàm
const selectedFile = document.getElementById['input'].files[0];
13 chấp nhận hai đầu vào. một phần tử hình ảnh và một tệp để đọc dữ liệu hình ảnhconst selectedFile = document.getElementById['input'].files[0];
9Hàm
const selectedFile = document.getElementById['input'].files[0];
15 được hiển thị ở trên tạo một throbber, được sử dụng để hiển thị thông tin về tiến độ, sau đó tạo một const selectedFile = document.getElementById['input'].files[0];
16 để xử lý việc tải dữ liệu lênTrước khi thực sự chuyển dữ liệu, một số bước chuẩn bị được thực hiện
- Trình nghe
18 tải lên củaconst selectedFile = document.getElementById['input'].files[0];
16 được thiết lập để cập nhật thông tin về tỷ lệ phần trăm mới cho máy quay phim để khi quá trình tải lên diễn ra, máy quay phim sẽ được cập nhật dựa trên thông tin mới nhấtconst selectedFile = document.getElementById['input'].files[0];
- Trình xử lý sự kiện tải lên
20 củaconst selectedFile = document.getElementById['input'].files[0];
16 được thiết lập để cập nhật thông tin tiến trình rung lên 100% để đảm bảo chỉ báo tiến trình thực sự đạt 100% [trong trường hợp có vấn đề về mức độ chi tiết trong quá trình này]. Sau đó, nó loại bỏ cái đập vì nó không còn cần thiết nữa. Điều này làm cho rung động biến mất sau khi quá trình tải lên hoàn tấtconst selectedFile = document.getElementById['input'].files[0];
- Yêu cầu tải lên tệp hình ảnh được mở bằng cách gọi phương thức
22 củaconst selectedFile = document.getElementById['input'].files[0];
16 để bắt đầu tạo yêu cầu POSTconst selectedFile = document.getElementById['input'].files[0];
- Loại MIME để tải lên được đặt bằng cách gọi hàm
16const selectedFile = document.getElementById['input'].files[0];
24. Trong trường hợp này, chúng tôi đang sử dụng loại MIME chung;const selectedFile = document.getElementById['input'].files[0];
- Đối tượng
12 được sử dụng để chuyển đổi tệp thành chuỗi nhị phânconst inputElement = document.getElementById["input"]; inputElement.addEventListener["change", handleFiles, false]; function handleFiles[] { const fileList = this.files; /* now you can work with the file list */ }
- Cuối cùng, khi nội dung được tải, hàm
16const selectedFile = document.getElementById['input'].files[0];
27 được gọi để tải nội dung của tệp lênconst selectedFile = document.getElementById['input'].files[0];
Xử lý không đồng bộ quá trình tải tệp lên
Ví dụ này, sử dụng PHP ở phía máy chủ và JavaScript ở phía máy khách, minh họa việc tải tệp lên không đồng bộ
const inputElement = document.getElementById["input"];
inputElement.addEventListener["change", handleFiles, false];
function handleFiles[] {
const fileList = this.files; /* now you can work with the file list */
}
0Ví dụ. Sử dụng URL đối tượng để hiển thị PDF
URL đối tượng có thể được sử dụng cho những thứ khác ngoài hình ảnh. Chúng có thể được sử dụng để hiển thị các tệp PDF được nhúng hoặc bất kỳ tài nguyên nào khác mà trình duyệt có thể hiển thị