Đọc tệp html cục bộ javascript

Tất nhiên javascript có thể đọc các tệp cục bộ. Chia sẻ kiến ​​​​thức khó kiếm được của bạn ở đây để cứu những người mới khác một số thất vọng

Tại sao dự án này?

Là một giáo viên khoa học máy tính có kinh nghiệm vừa phải về một số ngôn ngữ lập trình (bao gồm cả OOP và các ngôn ngữ chức năng), tôi đã gặp khó khăn lớn khi đọc tệp từ thư mục cục bộ khi lần đầu tiên học javascript. Các cuộc thảo luận về stackoverflow và các nơi khác cho thấy nhiều người mới sử dụng javascript có cùng sự thất vọng

Câu trả lời được đưa ra thường xuyên nhất là các vấn đề bảo mật cấm hoặc ít nhất là không khuyến khích việc đọc từ tệp cục bộ. Điều này không có ý nghĩa với nhiều người trong chúng ta. Chúng tôi không nói về một khách truy cập vào một trang web vô tình thực thi một chương trình javascript trên trình duyệt của cô ấy/anh ấy đang cố đọc một tệp từ máy tính của khách truy cập không may đó. Chúng ta đang nói về một chương trình javascript đang cố đọc tệp dữ liệu và/hoặc tệp cấu hình nằm trên cùng một máy tính nơi chương trình được lưu trữ. Đôi khi chúng ta thậm chí không nói về máy chủ web. Chúng tôi đang nói về việc mở tệp html cục bộ trong trình duyệt (dẫn đến loại URL này. file:///...html) và thực thi javascript cục bộ cần đọc tệp dữ liệu, trong đó. html, các. js và tệp dữ liệu đều nằm trong cùng một thư mục và nơi máy tính thậm chí có thể tắt Internet hoặc bất kỳ mạng cục bộ nào. Nếu khả năng đọc tệp trong những tình huống như vậy là một lỗ hổng bảo mật, thì người ta cũng có thể nói rằng khả năng mở trình duyệt của người dùng là lỗ hổng bảo mật hoặc tính khả dụng của công tắc nguồn máy tính là một lỗ hổng bảo mật. Điều này là hoàn toàn vô lý

Một câu trả lời thường được đưa ra khác là người ta phải chạy một máy chủ web cục bộ để chương trình javascript có thể thực hiện lệnh gọi ajax. Câu trả lời này ít nhất thừa nhận thực tế là một số người trong chúng ta không quan tâm đến việc viết một chương trình để chạy công khai. Chúng tôi có thể chạy nó hoàn toàn ngoại tuyến giống như chúng tôi chạy nhiều chương trình được viết bằng bất kỳ ngôn ngữ lập trình nào khác. Tuy nhiên, sẽ hợp lý hơn nếu trình duyệt mặc định cho phép đọc các tệp cục bộ khi một. Tệp html được mở dưới dạng file:///... trái ngược với http://... nguy hiểm tiềm ẩn và khi tệp javascript cũng là tệp cục bộ. Chạy một máy chủ web chỉ để đọc một tệp cục bộ không chỉ là một băng tần. (Có lẽ bạn có thể nói đó là một bản vá (rất lớn). )

Sự thật là, một chương trình javascript có thể đọc từ các tệp cục bộ có hoặc không có máy chủ web, với một số lưu ý. Vì vậy, những câu trả lời 'bạn không thể' hoàn toàn sai. (Có thể những người được hỏi đã hiểu nhầm câu hỏi của người mới?) Và chúng tôi hoàn toàn không đồng ý với những câu trả lời 'bạn không nên' đó bằng cách ghi lại cách thực hiện trong các tình huống khác nhau cho những người mới sử dụng javascript đang bối rối. Chúng tôi hy vọng một ngày nào đó việc tiêu chuẩn hóa tính năng rất cơ bản này sẽ làm cho dự án này trở nên lỗi thời

Giải pháp jQuery

Cũng như một số nhầm lẫn khác liên quan đến javascript, câu trả lời đơn giản nhất là đừng bận tâm đến javascript thuần túy mà thay vào đó hãy sử dụng jQuery hoặc một số thư viện khác

jQuery. get() có thể tải một tập tin từ xa. Biến thể jQuery cụ thể hơn của nó. getJSON() có thể tải tệp json từ xa. Họ cũng có thể tải tệp cục bộ nếu bản thân tệp javascript được tải từ trang html được chỉ định là "http. //máy chủ cục bộ/. ". (Giải pháp "máy chủ web cục bộ". )

Nếu bạn sử dụng crom để mở trang html cục bộ, trang này sẽ tải tệp javascript cục bộ dưới dạng "tệp. ///. ", thì jQuery. nhận () và jQuery. getJSON() sẽ không hoạt động. Trước tiên, bạn phải đóng tất cả các cửa sổ crom hiện có, sau đó khởi động nó từ dòng lệnh. chromium-browser --allow-file-access-from-files. Sau đó, cùng một trang html sẽ hoạt động ngay bây giờ. Điều này cũng đúng với opera --allow-file-access-from-files. Thật không may, đây không phải là một tùy chọn cho trình duyệt trên điện thoại và máy tính bảng Android

Nếu bạn sử dụng firefox để mở trang html cục bộ, trang này sẽ tải tệp javascript cục bộ dưới dạng "tệp. ///. ", sau đó bạn cần đặt bảo mật. fileuri. nghiêm ngặt_origin_policy thành Sai trong firefox về. cấu hình. Sau đó, jQuery. getJSON() hoạt động. Tuy nhiên trong tình huống này, jQuery. gọi lại get() không hoạt động trực tiếp. Tuy nhiên, bạn có thể gọi jQuery. get() để lấy dữ liệu và gọi window. setTimeout() để chờ dữ liệu xuất hiện. Đó là một hack xấu xí nhưng nó hoạt động. Nếu muốn, chương trình của bạn có thể thực hiện kiểm tra if (window.location.protocol == 'file:') { .. } để xem liệu việc hack này có cần thiết không

Sử dụng jQuery. getJSON() để đọc tệp cục bộ có thể khiến firefox xuất hiện thông báo lỗi trong bảng điều khiển với nội dung "Lỗi phân tích cú pháp XML. không được hình thành tốt. tập tin. ///. ". Điều này có thể được khắc phục bằng cách gọi overrideMimeType(). Xem QA này để biết chi tiết

Bài viết ngắn này cho thấy một cách đơn giản để sử dụng JS thuần túy để tương tác với các tệp cục bộ của người dùng mà không cần chuyển dữ liệu qua mạng. Phương pháp này có sẵn trong hầu hết các trình duyệt web crom như Google Chrome, MS Edge, v.v.

ví dụ 1. Đọc tệp và siêu dữ liệu của chúng

Ví dụ sau sử dụng đầu vào HTML đơn giản để đọc (các) tệp từ thiết bị người dùng và in ra siêu dữ liệu tệp trong bảng điều khiển trình duyệt

ví dụ 2. Đọc tệp văn bản dưới dạng chuỗi (hoặc JSON)

Ví dụ này bao gồm chức năng giải mã cơ sở 64 và sự kiện trình đọc để nghe khi tệp được đọc. Sau khi tệp được tải, kết quả văn bản được in ra dưới dạng Chuỗi tại HTML đích

Bạn có thể bao gồm chức năng phân tích cú pháp nếu tệp của bạn là JSON, XML, v.v.

Ví dụ trực tiếp trên JSFiddle

ví dụ 3. Đọc một tập tin hình ảnh

Ví dụ này cập nhật nguồn hình ảnh trên trang HTML thành tệp đã tải lên của người dùng

Bạn có thể bao gồm trình đọc siêu dữ liệu từ ví dụ 1 để kiểm tra xem tệp đã tải lên có phải là hình ảnh không

Ví dụ trực tiếp trên JSFiddle

Tôi hy vọng bạn thích bài viết này và thấy nó hữu ích cho công việc hoặc dự án hàng ngày của bạn

Tham gia Medium với liên kết giới thiệu của tôi - Joe T. Santhanavanich

Là thành viên Phương tiện, một phần phí thành viên của bạn sẽ được chuyển đến các tác giả mà bạn đã đọc và bạn có toàn quyền truy cập vào mọi câu chuyện…

vừa phải. com

Thêm nội dung tại PlainEnglish. io. Đăng ký nhận bản tin hàng tuần miễn phí của chúng tôi. Theo dõi chúng tôi trên Twitter và LinkedIn. Tham gia cộng đồng của chúng tôi

Bạn có thể đọc các tệp cục bộ bằng JavaScript không?

JavaScript có thể đọc HTML không?

HTML có thể đọc các tệp cục bộ không?

JavaScript có thể sửa đổi các tệp cục bộ không?