programming javascript

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

Trước đây, khi làm việc với Javascript frontend, không thể ghi hoặc chỉnh sửa tệp trên máy tính của người dùng. Lời biện minh xung quanh vấn đề này là việc ngăn chặn truy cập trực tiếp vào tệp của người dùng từ internet sẽ an toàn hơn

API Hệ thống tệp mới thay đổi điều đó và tạo ra một cách an toàn để chúng tôi thay đổi, chỉnh sửa và thêm tệp trên máy tính của người dùng. Điều đó có nghĩa là cuối cùng chúng tôi cũng có thể ghi vào máy tính của người dùng từ tệp Javascript giao diện người dùng, miễn là họ cho phép chúng tôi

Làm thế nào nó hoạt động?

Có ba chức năng chính mà chúng tôi có thể sử dụng với API hệ thống tệp

cửa sổ. showSaveFilePicker - cho phép chúng tôi lưu tệp vào máy tính của người dùng, sau đó chúng tôi có quyền truy cập đọc/ghi vào
cửa sổ. showOpenFilePicker - cho phép chúng tôi mở một tệp hiện có trên máy tính của người dùng, sau đó chúng tôi có thể đọc/ghi vào tệp đó
cửa sổ. showDirectoryPicker - cho phép chúng tôi truy cập vào một thư mục, sau đó chúng tôi có thể đọc/ghi vào đó

Đây là tất cả các chức năng tương thích không đồng bộ, vì vậy chúng tôi có thể đợi phản hồi của người dùng đối với từng chức năng trước khi tiếp tục. Nếu họ phản hồi bằng cách cấp quyền truy cập qua hộp thoại của trình duyệt, thì chúng tôi có thể sử dụng phản hồi để ghi trực tiếp vào đĩa của người dùng

Một ví dụ sử dụng showSaveFilePicker

Hãy xem một ví dụ. Dưới đây, chúng tôi có một nút mà khi người dùng nhấp vào, sẽ mở hộp thoại lưu tệp. Hộp thoại này có tên tệp được đề xuất mặc định là 'Tệp đầu tiên của tôi. txt'


let saveFile;
document.getElementById['someButton'].addEventListener['click', async [] => {
    try {
        saveFile = await window.showSaveFilePicker[{
            suggestedName: 'My First File.txt'
        }];
        const file = await saveFile.getFile[];
        const contents = await file.text[];
    } catch[e] {
        console.log[e];
    }
}];

Sử dụng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

0, chúng tôi có thể lấy tệp sau khi nó được tạo. Sau đó, chúng ta có thể lấy nội dung hiện tại của nó bằng cách sử dụng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

1. Tất nhiên, vì tệp này mới được tạo nên nó sẽ trống

Vì chúng tôi có tệp của mình, nếu nó tồn tại, được lưu trong biến



  
document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

2, chúng tôi có thể truy cập tệp ở nơi khác. Ví dụ: chúng tôi có thể sử dụng vùng văn bản để cập nhật nội dung của tệp


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

Để tóm tắt những gì chúng tôi đã làm ở đây

Đầu tiên, chúng tôi kiểm tra xem saveFile có được xác định không
Sau đó, chúng tôi kiểm tra xem quyền đã được 'cấp' cho tệp này chưa

Sau đó, chúng tôi ghi giá trị của vùng văn bản vào tệp bằng cách sử dụng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

Cuối cùng, chúng tôi sử dụng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

4 để kết thúc bài viết của mình

Thay vào đó, với showOpenFilePicker

Đôi khi, bạn không muốn lưu tệp - bạn muốn mở tệp đã tồn tại. Mục đích chính của các chức năng này là yêu cầu quyền của người dùng để có quyền truy cập vào tệp của họ. Như vậy,


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

0 có chức năng tương tự như


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

Nếu bạn cần mở tệp thay vì lưu tệp, bạn có thể thay chức năng lưu bằng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

0 để cho phép người dùng mở tệp hiện có

Bản trình diễn Lưu tệp

Dưới đây là bản demo của những gì chúng tôi đã mô tả cho đến nay. Nhấp vào nút để tạo tệp, sau đó nhập vào vùng văn bản. Nếu bạn kiểm tra tệp trên máy tính của mình, bạn sẽ thấy nó đã được cập nhật

Lưu ý, tại thời điểm viết bài này, bản demo này sẽ chỉ hoạt động trong các phiên bản Chrome và Edge mới nhất

Tạo một tệp mới

Sau khi tệp được tạo, khi bạn nhập vào vùng văn bản này, nó sẽ tự động lưu vào đĩa của bạn

Một ví dụ với showDirectoryPicker

Hãy xem một ví dụ khác, lần này với các thư mục. Trong ví dụ này, người dùng sẽ chọn một thư mục


let directory;
document.getElementById['addToFolder'].addEventListener['click', async [] => {
    try {
        directory = await window.showDirectoryPicker[{
            startIn: 'desktop'
        }];

        for await [const entry of directory.values[]] {
            let newEl = document.createElement['div'];
            newEl.innerHTML = `${entry.name} - ${entry.kind}`;
            document.getElementById['folder-info'].append[newEl];
        }
    } catch[e] {
        console.log[e];
    }
}];

Ở trên sẽ cho phép người dùng chọn một thư mục, sau đó chúng tôi sẽ có quyền truy cập vào. Sau đó, chúng tôi sẽ hiển thị danh sách tất cả các tệp trong thư mục đó bằng cách sử dụng vòng lặp for mà chúng tôi đã xác định ở trên

Tạo tập tin và thư mục

Bây giờ với quyền truy cập vào thư mục này, chúng tôi có thể tạo một tệp hoặc thư mục bằng cách sử dụng


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

3 hoặc


document.getElementById['add-text'].addEventListener['keyup', async[e] => {
    if[typeof saveFile !== "undefined"] {
        if [[await saveFile.queryPermission[]] === 'granted'] {
            const writable = await saveFile.createWritable[];
            await writable.write[document.getElementById['add-text'].value];
            await writable.close[];
        }
    }
}];

________số 8

Chúng tôi cũng có thể xóa các tệp và thư mục khỏi các thư mục mà chúng tôi có quyền truy cập. Để làm điều đó, chúng tôi chỉ đơn giản là làm


// Deletes a folder, recursively [i.e. it will delete all within it as well]
directory.removeEntry['Some Directory', { recursive: true }];
// Deletes a file
directory.removeEntry['SomeFile.html'];

Demo truy cập thư mục

Khi bạn nhấp vào nút bên dưới, nó sẽ liệt kê tất cả các tệp và thư mục trong thư mục bạn đã chọn. Vì vậy, mong đợi rất nhiều hàng nếu bạn có nhiều tệp

Lưu ý, một lần nữa, điều này sẽ chỉ hoạt động trong các phiên bản Edge và Chrome mới nhất

Cấp quyền truy cập vào thư mục

Bây giờ chúng ta có quyền truy cập vào thư mục, hãy nhấp vào bên dưới để tạo tệp bên trong thư mục

Tạo một tệp mới

Hỗ trợ

Vì đây là một phần công nghệ mới, hỗ trợ khác nhau giữa các trình duyệt. Đối với các trình duyệt dựa trên Blink, hỗ trợ khá rộng

Phần kết luận

API truy cập tệp là một công cụ thay đổi trò chơi. Nó cho phép chúng tôi có các ứng dụng web giao diện người dùng thuần túy thay đổi và chỉnh sửa các tệp, điều này mở ra tất cả các loại con đường cho các ứng dụng mới

Làm cách nào để đọc tệp văn bản cục bộ trong JavaScript?

readAsText[] để đọc cục bộ. .

readAsArrayBuffer[]. Đọc nội dung của tệp đầu vào được chỉ định. .

readAsBinaryString[]. Đọc nội dung của tệp đầu vào được chỉ định. .

readAsDataURL[]. Đọc nội dung của tệp đầu vào được chỉ định

Làm cách nào để đọc đường dẫn tệp cục bộ trong JavaScript?

Có thể mở và đọc các tệp cục bộ trong trình duyệt bằng cách sử dụng đối tượng Javascript FileReader. .

Bước 1 - Cho phép người dùng chọn tệp. .

Bước 2 — Đọc Siêu dữ liệu Tệp [Tên, Loại & Kích thước] bằng Thuộc tính của Đối tượng Tệp

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

Để đọc tệp, sử dụng FileReader , cho phép bạn đọc nội dung của đối tượng Tệp vào bộ nhớ. Bạn có thể hướng dẫn FileReader đọc tệp dưới dạng bộ đệm mảng, URL dữ liệu hoặc văn bản. // Kiểm tra xem file có phải là ảnh không.

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

Bạn không thể sửa đổi tệp cục bộ từ Javascript .