图片视频本地预览，初级指南

2024-02-02 14:53:52

本地预览是指在文件上传到服务器之前，先在本地对文件进行预览。这种方式可以让我们更好地控制上传的内容，避免上传不必要的文件。

本地预览图片的方法

1. 使用HTML5的FileReader对象

FileReader对象是一个内置的HTML5对象，它可以读取本地文件并将其转换为数据URL。以下是如何使用FileReader对象来预览图片：

<input type="file" id="file-input" accept="image/*">
<img id="preview" src="" alt="Preview">

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

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

    reader.onload = () => {
      preview.src = reader.result;
    };

    reader.readAsDataURL(file);
  });
</script>

2. 使用JavaScript的URL.createObjectURL()方法

URL.createObjectURL()方法可以将一个本地文件转换为一个URL，然后我们就可以使用这个URL来预览图片。以下是如何使用URL.createObjectURL()方法来预览图片：

<input type="file" id="file-input" accept="image/*">
<img id="preview" src="" alt="Preview">

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

  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const url = URL.createObjectURL(file);

    preview.src = url;
  });
</script>

本地预览视频的方法

1. 使用HTML5的

HTML5的

<input type="file" id="file-input" accept="video/*">
<video id="preview" controls>
  <source src="" type="video/mp4">
</video>

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

  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const url = URL.createObjectURL(file);

    preview.querySelector('source').src = url;
    preview.load();
  });
</script>

2. 使用JavaScript的MediaSource API

MediaSource API是一个JavaScript API，它可以让我们在网页上播放本地视频文件。以下是如何使用MediaSource API来预览视频：

<input type="file" id="file-input" accept="video/*">
<video id="preview" controls>
  <source src="" type="video/mp4">
</video>

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

  fileInput.addEventListener('change', () => {
    const file = fileInput.files[0];
    const url = URL.createObjectURL(file);

    const mediaSource = new MediaSource();
    preview.src = URL.createObjectURL(mediaSource);

    mediaSource.addEventListener('sourceopen', () => {
      const sourceBuffer = mediaSource.addSourceBuffer('video/mp4');

      sourceBuffer.addEventListener('updateend', () => {
        preview.load();
      });

      const reader = new FileReader();

      reader.onload = () => {
        sourceBuffer.appendBuffer(reader.result);
      };

      reader.readAsArrayBuffer(file);
    });
  });
</script>