HTML 5 cung cấp một cách tiêu chuẩn để tương tác với các tệp cục bộ với sự trợ giúp của API tệp. API tệp cho phép tương tác với các tệp đơn, nhiều tệp cũng như BLOB. API FileReader có thể được sử dụng để đọc tệp không đồng bộ khi cộng tác với xử lý sự kiện JavaScript. Tuy nhiên, tất cả các trình duyệt không hỗ trợ HTML 5, vì vậy điều quan trọng là phải kiểm tra tính tương thích của trình duyệt trước khi sử dụng API tệp. Có bốn phương thức sẵn có trong API FileReader để đọc các tệp cục bộ
- Trình đọc tệp. readAsArrayBuffer[]. Đọc nội dung của tệp đầu vào được chỉ định. Thuộc tính kết quả chứa ArrayBuffer đại diện cho dữ liệu của tệp
- Trình đọc tệp. readAsBinaryString[]. Đọc nội dung của tệp đầu vào được chỉ định. Thuộc tính kết quả chứa dữ liệu nhị phân thô từ tệp dưới dạng chuỗi
- Trình đọc tệp. readAsDataURL[]. Đọc nội dung của tệp đầu vào được chỉ định. Thuộc tính kết quả chứa một URL đại diện cho dữ liệu của tệp
- Trình đọc tệp. readAsText[]. Đọc nội dung của tệp đầu vào được chỉ định. Thuộc tính kết quả chứa nội dung của tệp dưới dạng chuỗi văn bản. Phương thức này có thể lấy phiên bản mã hóa làm đối số thứ hai [nếu được yêu cầu]. Mã hóa mặc định là UTF-8
Trong trường hợp này, chúng tôi đang sử dụng FileReader. readAsText[] để đọc cục bộ. tập tin txt
Read Text File
0_______59_______1
2
3
4
5
3
7
9
0
2_______60_______3
4
5
7_______60_______87
0
1
2
3
4
5
6
7
8
9
0
4
2
3
4
5
4
78
9
Read Text File
01
Read Text File
23
Read Text File
4_______63_______5
4
Read Text File
7
0
4
0
1
2
0
4
6
7
9
Mã này in nội dung của tệp đầu vào giống hệt như trong tệp đầu vào
JavaScript được biết đến nhiều nhất để phát triển trang web nhưng nó cũng được sử dụng trong nhiều môi trường không có trình duyệt. Bạn có thể học JavaScript từ đầu bằng cách làm theo Hướng dẫn JavaScript và Ví dụ về JavaScript này
Mục tiêu của chúng tôi là hướng dẫn bạn về các kỹ thuật và phương pháp khác nhau mà bạn có thể sử dụng để mở tệp văn bản cục bộ bằng JavaScript. Nó cũng minh họa việc sử dụng FileReader[]
,
input[type=file]{
width:90px;
color:transparent;
}
0, cũng như các hàm và sự kiện jQuery khác nhau để đọc tệp văn bản từ hệ thống của bạnSử dụng JavaScript FileReader[]
để mở tệp văn bản cục bộ
Mã HTML
Read Text File
Mã CSS
input[type=file]{
width:90px;
color:transparent;
}
Mã JavaScript
function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
đầu ra
Mã này in nội dung của tệp đã chọn [tệp đầu vào] giống như nội dung được ghi trong tệp đầu vào
Phương thức
input[type=file]{
width:90px;
color:transparent;
}
2 hiển thị đường dẫn của tệp đầu vào. Sau đó, phần tử có giá trị id là input[type=file]{
width:90px;
color:transparent;
}
3 được chọnTrình lắng nghe sự kiện lắng nghe
input[type=file]{
width:90px;
color:transparent;
}
4 để biết các thay đổi. Ở đây, nó được thay đổi khi [các] tệp được chọnNgay sau khi nó được thay đổi, một hàm ẩn danh sẽ chạy để tạo một đối tượng
input[type=file]{
width:90px;
color:transparent;
}
5 bằng cách sử dụng hàm tạo FileReader[]
và đặt tên cho nó là input[type=file]{
width:90px;
color:transparent;
}
7. Sử dụng input[type=file]{
width:90px;
color:transparent;
}
7, chúng ta có thể truy cập các chức năng và thuộc tính khác nhau của FileReader[]
. Hàm này đọc nội dung văn bản và hiển thị trên trình duyệtfunction showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
0 được sử dụng để khởi chạy một chức năng cụ thể. Trong trường hợp của chúng ta, hàm này chọn phần tử đầu tiên có id là function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
1 và đặt thuộc tính function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
2 của nó với giá trị là function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
3function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
2 đọc nội dung của phần tử hiện tại [nút] và các phần tử con của nó. function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
5 đọc nội dung của tệp đầu vào đã cho. Sau khi đọc hết nội dung, thuộc tính function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
6 có nội dung này dưới dạng chuỗiFileList được trả về bởi thuộc tính
function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
8 của phần tử input[type=file]{
width:90px;
color:transparent;
}
4. Trong ví dụ này, giả định rằng function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
9 là một phần tử input[type=file]{
width:90px;
color:transparent;
}
4 trả về đối tượng tệp ở chỉ số 0 [
Read Text File
1]Sử dụng JavaScript FileReader[]
và
Read Text File
3 để mở tệp văn bản cục bộ
Read Text File
Mã HTML
Read Text File
Mã JavaScript
$[document].ready[function[]{
$["#inputfile"].change[function[]{
var file = this.files[0];
var fr=new FileReader[];
fr.onload=function[data]{
$["#output"].html[data.target.result];
}
fr.readAsText[file];
}];
}];
đầu ra
Hey,
Are you learning about how to open a local text file using JavaScript?
Mã mẫu này cũng in nội dung cho tệp đầu vào như được ghi trong tệp [tệp đầu vào]
Sự kiện
Read Text File
4 kích hoạt khi mô hình đối tượng tài liệu [DOM] được tải đầy đủ. Để dễ hiểu, bạn có thể nói rằng nó làm cho một phương thức có thể truy cập được sau khi tải tài liệuSự kiện
Read Text File
5 dùng để biết giá trị của phần tử có bị thay đổi hay không. Chúng ta chỉ có thể sử dụng sự kiện
Read Text File
5 với các phần tử input[type=file]{
width:90px;
color:transparent;
}
4,
Read Text File
8 và
Read Text File
9. Nó có thể kích hoạt sự kiện
Read Text File
5 hoặc thực thi một chức năng trên sự kiện
Read Text File
5$[document].ready[function[]{
$["#inputfile"].change[function[]{
var file = this.files[0];
var fr=new FileReader[];
fr.onload=function[data]{
$["#output"].html[data.target.result];
}
fr.readAsText[file];
}];
}];
2 rất hữu ích nếu bạn muốn quay lại hoặc đặt $[document].ready[function[]{
$["#inputfile"].change[function[]{
var file = this.files[0];
var fr=new FileReader[];
fr.onload=function[data]{
$["#output"].html[data.target.result];
}
fr.readAsText[file];
}];
}];
3 [nội dung] của các phần tử đã chọnBây giờ, bạn có thể nghĩ về cách
$[document].ready[function[]{
$["#inputfile"].change[function[]{
var file = this.files[0];
var fr=new FileReader[];
fr.onload=function[data]{
$["#output"].html[data.target.result];
}
fr.readAsText[file];
}];
}];
3 đang được thay đổi? Hãy xem ảnh chụp màn hình sau [được viền màu cam]
function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
0, function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
3, function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
5 đã được giải thích trong phần trước. Bạn có thể vào đó để xem hoặc vào link này để đọc chi tiếtBạn có thể sử dụng Hệ thống tệp để đọc tệp văn bản cục bộ [nếu bạn đang viết mã trên Môi trường nút]
Sử dụng JavaScript input[type=file]{
width:90px;
color:transparent;
}
0 và input[type=file]{
width:90px;
color:transparent;
}
5 để mở tệp văn bản cục bộ
input[type=file]{
width:90px;
color:transparent;
}
input[type=file]{
width:90px;
color:transparent;
}
Mã HTML
Read Text File
File Content:
Mã JavaScript
function readFile[file] {
return new Promise[[resolve, reject] => {
let freader = new FileReader[];
freader.onload = x=> resolve[freader.result];
freader.readAsText[file];
}]}
async function readInputFile[input] {
output.innerText = await readFile[input.files[0]];
}
đầu ra
Hey,
Are you learning about how to open a local text file using JavaScript?
Trong mã ví dụ này, hàm
Hey,
Are you learning about how to open a local text file using JavaScript?
2 chạy ngay khi tệp đầu vào được chọn. Hàm này sẽ đợi [sử dụng toán tử Hey,
Are you learning about how to open a local text file using JavaScript?
3] để hoàn thành input[type=file]{
width:90px;
color:transparent;
}
0 và trả về giá trị dự kiến [nếu được giải quyết]Hơn nữa, nội dung [
$[document].ready[function[]{
$["#inputfile"].change[function[]{
var file = this.files[0];
var fr=new FileReader[];
fr.onload=function[data]{
$["#output"].html[data.target.result];
}
fr.readAsText[file];
}];
}];
3] của phần tử có id function showSelectedFile[]{
selectedfile.value= document.getElementById["inputfile"].value;
}
document.getElementById['inputfile']
.addEventListener['change', function[] {
var fr=new FileReader[];
fr.onload=function[]{
document.getElementById['output']
.textContent=fr.result;
}
fr.readAsText[this.files[0]];
}]
1 sẽ được thay thế bằng giá trị được trả về bởi input[type=file]{
width:90px;
color:transparent;
}
0. Toán tử Hey,
Are you learning about how to open a local text file using JavaScript?
3 được sử dụng để đợi input[type=file]{
width:90px;
color:transparent;
}
0, nó là một đối tượng đại diện cho việc vượt qua hoặc thất bại của một hàm không đồng bộ và giá trị tương ứng của nó. Nó có ba tiểu bang tên là
Read Text File
File Content:
0,
Read Text File
File Content:
1, và
Read Text File
File Content:
2