浏览器文件API示例

浏览器的文件API主要是通过 File 和 FileReader 接口来处理文件，这些API允许用户在网页中访问和操作本地文件。以下是一些常见的文件API使用场景和示例：

1. 用户文件上传

通过 <input> 标签，用户可以选择文件并将其上传到服务器。JavaScript 可以使用 File 对象来获取文件的详细信息，比如文件名、类型、大小等。

<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');

  fileInput.addEventListener('change', function(event) {
    const file = event.target.files[0]; // 获取第一个文件
    if (file) {
      console.log('文件名:', file.name);
      console.log('文件类型:', file.type);
      console.log('文件大小:', file.size, 'bytes');
    }
  });
</script>

2. 读取文件内容

使用 FileReader API 可以读取文件内容，无需将其上传到服务器。可以读取文本文件、图像或其他二进制数据。

示例代码（读取文本文件）

<input type="file" id="textFileInput" />
<script>
  const textFileInput = document.getElementById('textFileInput');

  textFileInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file && file.type.startsWith('text/')) {
      const reader = new FileReader();
      reader.onload = function(e) {
        const content = e.target.result;
        console.log('文件内容:', content);
      };
      reader.readAsText(file);
    }
  });
</script>

3. 读取图像并显示

可以使用 FileReader 将图像文件读入浏览器，并显示在页面上。

示例代码（读取并显示图像）

<input type="file" id="imageInput" accept="image/*" />
<img id="preview" alt="Image Preview" />
<script>
  const imageInput = document.getElementById('imageInput');
  const preview = document.getElementById('preview');

  imageInput.addEventListener('change', function(event) {
    const file = event.target.files[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = function(e) {
        preview.src = e.target.result; // 设置图片预览
      };
      reader.readAsDataURL(file);
    }
  });
</script>

4. 拖拽上传

使用 drag 和 drop 事件，用户可以通过拖放文件的方式上传文件。

示例代码（拖放文件上传）

<div id="dropArea" style="border: 2px dashed #ccc; padding: 20px;">
  拖放文件到此处
</div>
<script>
  const dropArea = document.getElementById('dropArea');

  dropArea.addEventListener('dragover', (event) => {
    event.preventDefault();
    dropArea.style.backgroundColor = '#f0f0f0';
  });

  dropArea.addEventListener('dragleave', () => {
    dropArea.style.backgroundColor = '#fff';
  });

  dropArea.addEventListener('drop', (event) => {
    event.preventDefault();
    const file = event.dataTransfer.files[0];
    console.log('拖放的文件:', file.name);
  });
</script>

这些示例展示了浏览器文件API的基本使用场景，包括文件选择、文件读取、图片显示以及拖放文件。