Sử dụng javascript, tôi muốn đọc tệp xml từ đĩa, sửa đổi các giá trị/thêm các phần tử/thuộc tính và lưu lại xml vào đĩa.Đọc tệp xml, sửa đổi các giá trị/thêm các phần tử/thuộc tính và lưu xml như thế nào?
Bất kỳ ai biết ở đây tôi có thể tìm thấy các ví dụ hoạt động với IE và Firefox không? Tôi allready tìm thấy các ví dụ để đọc, bây giờ thay đổi giá trị đó là vấn đề.
Cảm ơn
Giả sử bạn đang cố gắng để đọc và ghi vào đĩa từ trình duyệt và không Node.js, bước đầu tiên là sử dụng một thẻ input loại file để có được quyền truy cập vào hệ thống tập tin.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>
Ngay sau khi tệp được chọn, chúng tôi muốn trích xuất đốm màu từ phần tử. Một thời điểm tốt để làm điều đó là trong sự kiện thay đổi.
const input = document.querySelector('#input');
input.addEventListener('change',() => {
const file = input.files.item(0);
});
Có nhiều cách để phân tích cú pháp đốm màu thành cây yếu tố. Ở đây tôi đã tận dụng thực tế là trình duyệt phân tích cú pháp tài liệu xml trong các yêu cầu HTTP.
function blobToDocument(blob, callback) {
const url = URL.createObjectURL(blob);
const request = new XMLHttpRequest();
request.open('Get', url);
request.responseType = 'document';
request.addEventListener('load',() => {
callback(request.response);
});
request.send();
}
Sau khi đã phân tích cú pháp, chúng tôi có thể thao tác như chúng tôi sẽ thao tác cây DOM.
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
Để lưu các tập tin vào đĩa chúng ta cần phải đảo ngược quá trình phân tích cú pháp, chuyển đổi cây của các yếu tố trở thành một chuỗi.
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
Điều duy nhất còn lại là gửi tệp trở lại đĩa. Để đạt được điều này, chúng tôi có thể kích hoạt sự kiện nhấp chuột trên liên kết với tệp đã sửa đổi của chúng tôi.
function download(string, mime) {
const blob = new Blob([string], { type: mime });
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.href = url;
a.download = 'document.xml';
a.click();
}
Đây là mã hoàn chỉnh
const input = document.querySelector('#input');
input.addEventListener('change',() => {
const file = input.files.item(0);
blobToDocument(file, (xmlDocument) => {
editDocument(xmlDocument);
download(documentToString(xmlDocument), "text/xml");
});
});
function blobToDocument(blob, callback) {
const url = URL.createObjectURL(blob);
const request = new XMLHttpRequest();
request.open('Get', url);
request.responseType = 'document';
request.addEventListener('load',() => {
callback(request.response);
});
request.send();
}
function editDocument(document) {
const element = document.createElement('editor');
element.textContent = 'JavaScript';
document.firstChild.appendChild(element);
return document;
}
function documentToString(document) {
const serializer = new XMLSerializer();
return serializer.serializeToString(document);
}
function download(string, mime) {
const blob = new Blob([string], { type: mime });
const a = document.createElement('a');
const url = URL.createObjectURL(blob);
a.href = url;
a.download = 'document.xml';
a.click();
}<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input type="file" id="input" accept="text/xml">
<script src="script.js"></script>
</body>