Một đối tượng tệp kế thừa từ Có hai cách để có được nó. Đầu tiên, có một hàm tạo, tương tự như Blob
và được mở rộng với các khả năng liên quan đến hệ thống tập tin.Blob
:new File[fileParts, fileName, [options]]
fileParts
- là một mảng các giá trị Blob/Buffersource/String. – is an array of Blob/BufferSource/String values.fileName
- Chuỗi tên tệp. – file name string.options
- Đối tượng tùy chọn: – optional object:lastModified
- dấu thời gian [ngày nguyên] của sửa đổi cuối cùng. – the timestamp [integer date] of last modification.
Thứ hai, chúng ta 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 kéo các giao diện trình duyệt hoặc các giao diện trình duyệt khác. Trong trường hợp đó, tệp nhận được thông tin này từ HĐH.Vì
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
, 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ó cùng các 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 sửa đổi cuối cùng.
Đó là cách mà chúng ta có thể nhận được 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ỉ cần
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
}
9.Filereader
Filereader là một đối tượng có mục đích duy nhất là đọc dữ liệu từ các đối tượng Blob
[và do đó
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ác sự kiện, vì đọc từ đĩa có thể mất thời gian.
Người 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
3. – read the data in binary formatlet reader = new FileReader[]; // no arguments
3.let 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]. – read the data as a text string with the given encoding [let reader = new FileReader[]; // no arguments
5 by default].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 Base64. – read the binary data and encode it as base64 data url.let reader = new FileReader[]; // no arguments
7 - Hủy thao tác. – cancel the operation.let reader = new FileReader[]; // no arguments
Việc lựa chọn phương pháp
let reader = new FileReader[]; // no arguments
8 phụ 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 hoạt động nhị phân cấp thấp. Đối với các hoạt động cấp cao, như cắ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 các tệp văn bản, khi chúng tôi muốn có một chuỗ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]; }; }
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 giải pháp thay thế để đọc một tệp cho điều đó, 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]; }; }
6.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]; }; }
Khi đọc sách, có những sự kiện:
7 - Đang tải bắt đầu.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]; }; }
8 - Xảy ra trong khi đọc.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 - Không có lỗi, đọc Hoàn thành.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
0 -
7 được gọi.let reader = new FileReader[]; // no arguments
Blob
2 - Đã xảy ra lỗi.Blob
3 - Đọc kết thúc với thành công hoặc thất bại.
Khi đọc kết thúc, chúng ta có thể truy cập kết quả như:
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 là chắc chắn
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, 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 có thể đọc không chỉ các tệp, mà là bất kỳ đốm màu nào.
Chúng ta có thể sử dụng nó để chuyển đổi một Blob sang định dạng khác:
2 - đếnlet reader = new FileReader[]; // no arguments
3,let reader = new FileReader[]; // no arguments
4 - để chuỗi [một giải pháp thay thế cholet reader = new FileReader[]; // no arguments
Blob
3],
6 - đến URL dữ liệu Base64.let reader = new FileReader[]; // no arguments
Blob
5 có sẵn bên trong nhân viên web
Đối với nhân viên web, cũng tồn tại một biến thể đồng bộ là Blob
8, được gọi là Filereadersync.
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à là trả về kết quả, như các chức năng thường xuyên.Mặc dù vậy, chỉ có bên trong một nhân viên web, bởi vì sự chậm trễ trong các cuộc gọi đồng bộ, có thể đọc được từ các tệp, trong nhân viên web ít quan trọng hơn. Chúng không ảnh hưởng đến trang.
Bản tóm tắ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 đối tượng kế thừa từ Blob
.Ngoài các phương thức và thuộc tính 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ũng có các thuộc tính
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, như fileParts
5 hoặc kéo các sự kiện kéo dài [fileParts
6].Blob
8 Các đối tượng có thể đọc từ một tệp hoặc một đố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, cơ sở-64 được mã hóa [
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]; }; }
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 tôi đã làm với Blobs, chúng tôi 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 vải, v.v.Và nếu chúng tôi sẽ 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, thì đó cũng dễ dàng: API mạng như fileName
6 hoặc fileName
7 tự nhiê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.