web 预览显示本地图片、音频

八分钟de温暖

于 2024-06-06 09:02:41 发布

阅读量248

点赞数 2

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/weixin_40466351/article/details/139293480

版权

一、预览本地图片

<!DOCTYPE html>
<html>
<body>

<input type="file" accept="image/*" onchange="previewImage(this)">

<img id="preview" src="" alt="图片预览">

<script>
function previewImage(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById('preview').src = e.target.result;
    }

    reader.readAsDataURL(input.files[0]);
  }
}
</script>

</body>
</html>

二、预览本地音频

<!DOCTYPE html>
<html>
<body>

<input type="file" accept="audio/*" onchange="previewAudio(this)">

<audio id="preview" controls>
  您的浏览器不支持 audio 元素。
</audio>

<script>
function previewAudio(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById('preview').src = e.target.result;
    }

    reader.readAsDataURL(input.files[0]);
  }
}
</script>

</body>
</html>

三、预览本地视频

<!DOCTYPE html>
<html>
<body>

<input type="file" accept="video/*" onchange="previewVideo(this)">

<video id="preview" controls>
  您的浏览器不支持 video 元素。
</video>

<script>
function previewVideo(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      document.getElementById('preview').src = e.target.result;
    }

    reader.readAsDataURL(input.files[0]);
  }
}
</script>

</body>
</html>