Thứ hai, chúng tôi thường xuyên nhận được một tệp từ
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
0 hoặc drag'n'drop hoặc các giao diện trình duyệt khác. Trong trường hợp đó, tệp sẽ lấy thông tin này từ HĐHVì
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 kế thừa từ Blob
, nên các đối tượng của
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 có cùng thuộc tính, cộng với
4 – tên tệp,function showFile[input] { let file = input.files[0]; alert[`File name: ${file.name}`]; // e.g my.png alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824 }
lastModified
– dấu thời gian của lần sửa đổi cuối cùng
Đó là cách chúng ta có thể lấy một đối tượng
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 từ
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
0
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
Xin lưu ý
Đầu vào có thể chọn nhiều tệp, vì vậy
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
8 là một đối tượng giống như mảng với chúng. Ở đây chúng tôi chỉ có một tệp, vì vậy chúng tôi chỉ lấy
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
9là một đối tượng với mục đích duy nhất là đọc dữ liệu từ các đối tượng Blob
[và do đó cũng là
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1]Nó cung cấp dữ liệu bằng cách sử dụng các sự kiện, vì việc đọc từ đĩa có thể mất thời gian
nhà xây dựng
let reader = new FileReader[]; // no arguments
Các phương pháp chính
2 – đọc dữ liệu ở định dạng nhị phânlet reader = new FileReader[]; // no arguments
3let reader = new FileReader[]; // no arguments
4 – đọc dữ liệu dưới dạng chuỗi văn bản với mã hóa đã cho [let reader = new FileReader[]; // no arguments
5 theo mặc định]let reader = new FileReader[]; // no arguments
6 – đọc dữ liệu nhị phân và mã hóa nó dưới dạng url dữ liệu base64let reader = new FileReader[]; // no arguments
7 – hủy thao táclet reader = new FileReader[]; // no arguments
Việc lựa chọn phương pháp
let reader = new FileReader[]; // no arguments
8 tùy thuộc vào định dạng chúng tôi thích, cách chúng tôi sẽ sử dụng dữ liệu
9 – đối với các tệp nhị phân, để thực hiện các thao tác nhị phân cấp thấp. Đối với các thao tác cấp cao, như cắt lát,let reader = new FileReader[]; // no arguments
1 kế thừa từfunction showFile[input] { let file = input.files[0]; alert[`File name: ${file.name}`]; // e.g my.png alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824 }
Blob
, vì vậy chúng tôi có thể gọi chúng trực tiếp mà không cần đọc
2 – đối với tệp văn bản, khi chúng tôi muốn lấy một chuỗifunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
3 – khi chúng tôi muốn sử dụng dữ liệu này trongfunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
4 chofunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
5 hoặc thẻ khác. Có một cách khác để đọc tệp cho việc đó, như đã thảo luận trong chương Blob.function readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
6function readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
Khi quá trình đọc diễn ra, có những sự kiện
7 – bắt đầu tảifunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
8 – xảy ra trong khi đọcfunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
9 – không có lỗi, đọc xongfunction readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
Blob
0 –
7 được gọilet reader = new FileReader[]; // no arguments
Blob
2 – đã xảy ra lỗiBlob
3 – đọc xong dù thành công hay thất bại
Khi đọc xong, chúng ta có thể truy cập kết quả dưới dạng
Blob
4 là kết quả [nếu thành công]Blob
5 là lỗi [nếu không thành công]
Các sự kiện được sử dụng rộng rãi nhất chắc chắn là
function readFile[input] {
let file = input.files[0];
let reader = new FileReader[];
reader.readAsText[file];
reader.onload = function[] {
console.log[reader.result];
};
reader.onerror = function[] {
console.log[reader.error];
};
}
9 và Blob
2Đây là một ví dụ về việc đọc một tập tin
function readFile[input] {
let file = input.files[0];
let reader = new FileReader[];
reader.readAsText[file];
reader.onload = function[] {
console.log[reader.result];
};
reader.onerror = function[] {
console.log[reader.error];
};
}
Blob
8 cho đốm màu
Như đã đề cập trong chương Blob, Blob
8 không chỉ có thể đọc các tệp mà còn bất kỳ đốm màu nào
Chúng ta có thể sử dụng nó để chuyển đổi một đốm màu sang định dạng khác
2 – đếnlet reader = new FileReader[]; // no arguments
3,let reader = new FileReader[]; // no arguments
4 – thành chuỗi [thay thế cholet reader = new FileReader[]; // no arguments
Blob
3],
6 – đến url dữ liệu base64let reader = new FileReader[]; // no arguments
Blob
5 có sẵn trong Web Worker
Đối với Web Worker, cũng tồn tại một biến thể đồng bộ của Blob
8, được gọi là
Các phương thức đọc của nó
let reader = new FileReader[]; // no arguments
8 không tạo ra các sự kiện, mà trả về một kết quả, giống như các hàm thông thường.Tuy nhiên, điều đó chỉ xảy ra bên trong Công nhân web, vì sự chậm trễ trong các cuộc gọi đồng bộ, có thể xảy ra khi đọc từ tệp, trong Công nhân web ít quan trọng hơn. Chúng không ảnh hưởng đến trang
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 đối tượng kế thừa từ Blob
Ngoài các phương thức và thuộc tính của Blob
, các đối tượng
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 còn có các thuộc tính của
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
4 và lastModified
, cùng với khả năng nội bộ để đọc từ hệ thống tệp. Chúng tôi thường nhận được các đối tượng
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 từ đầu vào của người dùng, chẳng hạn như các sự kiện fileParts
5 hoặc Drag’and’Drop [fileParts
6]Blob
8 đối tượng có thể đọc từ tệp hoặc đốm màu, ở một trong ba định dạng
- Chuỗi [
2]function readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
3 [let reader = new FileReader[]; // no arguments
9]let reader = new FileReader[]; // no arguments
- Url dữ liệu, mã hóa base-64 [
3]function readFile[input] { let file = input.files[0]; let reader = new FileReader[]; reader.readAsText[file]; reader.onload = function[] { console.log[reader.result]; }; reader.onerror = function[] { console.log[reader.error]; }; }
Tuy nhiên, trong nhiều trường hợp, chúng tôi không phải đọc nội dung tệp. Giống như chúng ta đã làm với blobs, chúng ta có thể tạo một url ngắn với
function readFile[input] {
let file = input.files[0];
let reader = new FileReader[];
reader.readAsText[file];
reader.onload = function[] {
console.log[reader.result];
};
reader.onerror = function[] {
console.log[reader.error];
};
}
6 và gán nó cho fileName
3 hoặc fileName
4. Bằng cách này, tệp có thể được tải xuống hoặc hiển thị dưới dạng hình ảnh, như một phần của canvas, v.v.Và nếu chúng tôi định gửi một
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1 qua mạng, điều đó cũng dễ dàng. API mạng như fileName
6 hoặc fileName
7 vốn chấp nhận các đối tượng
function showFile[input] {
let file = input.files[0];
alert[`File name: ${file.name}`]; // e.g my.png
alert[`Last modified: ${file.lastModified}`]; // e.g 1552830408824
}
1