Javascript之文件操作

2023年5月18日上午12:46 • JavaScript

下面是详细讲解JavaScript之文件操作的完整攻略，包括文件的读取、写入、删除等常见操作。

1. 读取文件

1.1 读取本地文件

可以使用FileReader对象读取本地文件。它提供一些方法来读取文件的内容，如readAsArrayBuffer、readAsBinaryString、readAsText、readAsDataURL等。这些方法的参数是一个File对象，表示要读取的文件。

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  }
}, false);

1.2 读取远程文件

使用XMLHttpRequest对象可以读取远程文件。需要发送一个GET请求，然后处理返回的结果。可以使用responseText属性来获取返回的文本内容。

const xhr = new XMLHttpRequest();

xhr.open('GET', 'path/to/remote/file.txt');
xhr.send();

xhr.onload = function() {
  console.log(xhr.responseText);
}

2. 写入文件

2.1 写入本地文件

使用FileWriter对象写入本地文件。它提供了一些方法来写入文件内容，如write、writeAsBinaryString等。这些方法的参数是一个Blob对象，表示要写入的内容。

const file = new Blob(['Hello, world!'], { type: 'text/plain' });
const fileWriter = new FileWriter();

fileWriter.write(file);

fileWriter.onwriteend = function() {
  console.log('Write file success');
}

2.2 写入远程文件

同样使用XMLHttpRequest对象发送一个POST请求，然后把要写入的内容以字符串形式作为请求体发送到远程服务器。

const xhr = new XMLHttpRequest();

xhr.open('POST', 'path/to/remote/file.txt');
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send('Hello, world!');

xhr.onload = function() {
  console.log('Write file success');
}

3. 删除文件

使用FileSystem API或者服务器端脚本可以删除本地文件。而删除远程文件，可以使用XMLHttpRequest对象发送一个DELETE请求到服务器端。

const xhr = new XMLHttpRequest();

xhr.open('DELETE', 'path/to/remote/file.txt');
xhr.send();

xhr.onload = function() {
  console.log('Delete file success');
}

示例

读取本地文件示例

<input id="file-input" type="file" />

<script>
const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  const reader = new FileReader();

  reader.readAsText(file);

  reader.onload = function() {
    console.log(reader.result);
  }
}, false);
</script>

写入本地文件示例

const file = new Blob(['Hello, world!'], { type: 'text/plain' });
const fileWriter = new FileWriter();

fileWriter.write(file);

fileWriter.onwriteend = function() {
  console.log('Write file success');
}

这是一个示例，它会在本地写入一个名为test.txt的文件，并将Hello, world!写入到该文件中。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Write file example</title>
  </head>
  <body>
    <script>
      const file = new Blob(['Hello, world!'], { type: 'text/plain' });
      const fileWriter = new FileWriter();

      fileWriter.write(file);

      fileWriter.onwriteend = function() {
        console.log('Write file success');
      }
    </script>
  </body>
</html>

删除远程文件示例

const xhr = new XMLHttpRequest();

xhr.open('DELETE', 'path/to/remote/file.txt');
xhr.send();

xhr.onload = function() {
  console.log('Delete file success');
}

这是一个示例，它会删除远程服务器上的file.txt文件。

希望我的回答能帮到你，如还有不明白的地方，欢迎继续提问。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Javascript之文件操作 - Python技术站