Hướng dẫn how do you display the contents of a text file in html? - làm cách nào để bạn hiển thị nội dung của tệp văn bản trong html?

Làm việc trong một dự án, một trong những trang web sẽ hiển thị danh sách mọi người (cụ thể là danh sách những người từ một lớp tốt nghiệp chưa được định vị). Thay vì cập nhật thủ công các danh sách này trong các bảng là cách thực hiện Web 1.0, tôi muốn lấy danh sách tên đã gửi, chuyển chúng sang danh sách .txt đơn giản và sau đó hiển thị danh sách đó trên trang web.

Cho đến nay, cách dễ dàng để làm điều này là sử dụng phần tử iframe ... Chỉ có điều là, tôi không thể (hoặc không biết cách) áp dụng bất kỳ kiểu dáng văn bản nào cho nội dung của iframe. Tôi đã xuất bản một mẫu về những gì tôi có thể hoàn thành ở đây: http://dongarber.com/test//helpus-iframetest.html

Phông chữ mặc định là chuyển phát nhanh và khách hàng có thể sẽ không quá quan tâm đến nó. Có cách nào tốt hơn để làm điều này không, điều đó không yêu cầu ASP.NET hoặc cơ sở dữ liệu?

#list  p {
    font: arial;
    font-size: 14px;
}

...


    <p>Help us locate all of our classmates from the High School class of 1961. If  you know&nbsp;where they live&nbsp;or their e-mail addresses contact the Reunion Committee.</p>
    <p>&nbsp;</p>
    <div id="list"><p><iframe src="missingmen.txt" width=200 height=400 frameborder=0 ></iframe></p></div>



  </div>

Cập nhật lần cuối: ngày 22 tháng 8 năm 2022

Trong - JavaScript

Hướng dẫn how do you display the contents of a text file in html? - làm cách nào để bạn hiển thị nội dung của tệp văn bản trong html?

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp đọc tệp văn bản và hiển thị trong HTML bằng JavaScript, ở đây chúng tôi đã xác định thẻ đầu vào tệp để thu thập tệp văn bản và trong đối tượng đầu đọc tệp được xác định tập lệnh và chúng tôi tải tệp văn bản đã tải lên bằng sự kiện Onload.

Chúng tôi đang truy xuất tất cả các văn bản từ tệp bằng đối tượng đầu đọc tệp và nối vào phần tử div được xác định trong khối HTML để hiển thị toàn bộ nội dung trong tệp văn bản được tải lên theo phương thức readastext ().

Hướng dẫn từng bước về đọc tệp văn bản và hiển thị trong HTML bằng JavaScript:-

Ở đây chúng tôi đã xác định thẻ đầu vào với loại tệp để tải lên tệp văn bản và thẻ div được xác định với ID id res, cho các nội dung tệp được truy xuất trên trang web.

Trong tập lệnh, chúng tôi thêm trình nghe sự kiện trên thẻ đầu vào bằng ID id, sau đó xác định chức năng trong đó để đọc tệp văn bản.

Ở đây chúng tôi tạo đối tượng đầu đọc tệp 'file_reader' sau đó chúng tôi thêm sự kiện onload với hàm được xác định sau đó, trong đó chúng tôi đặt vị trí đối tượng file_reader sau đó sử dụng phương thức readastext () Chúng tôi đọc nội dung của tệp văn bản từ vị trí đầu tiên và được thêm vào tất cả các nội dung trên div phần tử div 'res'.

<!DOCTYPE html>
<html>
    <head>
        <title>Read and Display Text File</title>
    </head>
    <body>
        <input type="file" name="rf" id="infl">
        <div id="res"></div>
        <script>
            document.getElementById('infl').addEventListener('change',function(){
                var file_reader=new FileReader();
                file_reader.onload=function(){
                    document.getElementById('res').textContent=file_reader.result;
                }
                file_reader.readAsText(this.files[0]);
            })
        </script>
    </body>
</html>
  1. Tag được hướng dẫn trình duyệt web về phiên bản tệp HTML được viết và nó không có thẻ kết thúc nào.
  2. Thẻ được sử dụng để chỉ ra sự khởi đầu của tài liệu HTML.
  3. Như đã hiển thị thẻ được hiển thị chứa thông tin về trang web và các liên kết tệp bên ngoài được khai báo ở đây. Tag được sử dụng để đặt tiêu đề trang web.
  4. Cả hai và thẻ đều có thẻ kết thúc cặp của họ, vì vậy chúng tôi cần đóng các thẻ kết thúc tương ứng. Nếu bạn không đóng bất kỳ ai của Tag kết thúc đúng cách cũng ảnh hưởng đến kết quả trang web.
  5. TAG là bắt đầu của phần mã hóa chính vì nó chứa mã hóa toàn bộ các khối trang web và các yếu tố được mô tả ở đây.
  6. Trong HTML, chúng tôi đã xác định thẻ đầu vào với loại tệp để tải lên bất kỳ tệp văn bản nào và thẻ div được xác định với ID id res cho các nội dung được truy xuất trên trang web.
  7. Trong chúng tôi, việc thêm sự kiện AddEventListener trên thẻ đầu vào bằng ID ‘Infl, bằng cách sử dụng mà chúng tôi xác định‘ Thay đổi chức năng, trong đó chúng tôi đã tạo đối tượng đầu đọc tệp ‘File_Reader.
  8. Chúng tôi nối thêm sự kiện onload cho chức năng xác định, ở đây chúng tôi thêm trình đọc tệp trên phần tử div ‘res, sau đó sử dụng phương thức readastext () với đối tượng đầu đọc tệp Chúng tôi đọc tất cả các nội dung từ vị trí 0 và nối vào phần tử div.
  9. Cả hai, các thẻ đóng tương ứng. TAG chỉ ra phần cuối của cơ thể, sau đó thẻ cho biết đầu cuối của tài liệu HTML.

Sự kết luận :-

Tóm lại, bây giờ chúng tôi có thể biết cách đọc tệp văn bản và hiển thị trong HTML bằng JavaScript.

Khi chúng tôi thực hiện chương trình này trên trình duyệt, chúng tôi có thể thấy tùy chọn tải lên tệp mà người dùng cần tải lên .txt nhập bất kỳ một tệp nào sau đó kết quả của tệp đó chứa các văn bản sẽ được hiển thị trên trang web.

Nếu bạn đã tải lên một số tệp loại khác có nghĩa là nó truy xuất và hiển thị nhưng chúng ta có thể đọc chúng vì chúng ta cần định dạng chúng.

Để đọc bất kỳ loại tệp nào, chúng tôi cần sử dụng trình đọc tệp với một số quy trình khác sau này chúng tôi sẽ thấy về chúng.

Tôi hy vọng hướng dẫn này trên tệp văn bản đọc và hiển thị trong HTML bằng cách sử dụng JavaScript giúp bạn và các bước và phương thức được đề cập ở trên rất dễ thực hiện và thực hiện.

Nội dung của tệp văn bản là gì?

Tệp văn bản là một loại tệp kỹ thuật số, không thể thực hiện được chứa các chữ cái, số, ký hiệu và/hoặc kết hợp.Nó cho phép tạo và lưu trữ văn bản mà không có bất kỳ định dạng đặc biệt nào.Các tệp văn bản còn được gọi là tệp phẳng hoặc tệp ASCII.letters, numbers, symbols and/or a combination. It enables the creation and storage of text without any special formatting. Text files are also known as flat files or ASCII files.

HTML có thể đọc tệp văn bản không?

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, cũng như blob.API FileReader có thể được sử dụng để đọc một tệp không đồng bộ trong sự hợp tác với xử lý sự kiện JavaScript.. The File API allows interaction with single, multiple as well as BLOB files. The FileReader API can be used to read a file asynchronously in collaboration with JavaScript event handling.