Làm cách nào để mở tệp bằng JavaScript?

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

 

    

 

    0_______59_______1 23

4537

    9

 0

     2_______60_______3 4

 5

     7_______60_______87

0123

456789

    0

4    2     3    4     5

4    78    9

0123

4_______63_______5

47

    0

4012

04

    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ạn

Sử 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ọn

Trì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ọn

Ngay 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ệt

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 đượ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]);
        })

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]);
        })

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ỗi

FileList đượ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ộ

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ệu

Sự 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ọn

Bâ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ết

Bạ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ộ

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

Làm cách nào để tải một tệp trong JavaScript?

Làm cách nào để mở tệp trong trình duyệt JavaScript?

Làm cách nào để mở một tệp và đọc nó trong js?

Làm cách nào để mở tệp từ URL trong JavaScript?