图片上传的预览URL.createObjectURL（）

最新推荐文章于 2024-12-12 10:51:34 发布

只想放假出去玩

最新推荐文章于 2024-12-12 10:51:34 发布

阅读量578

点赞数

CC 4.0 BY-SA版权

文章标签： html5 html

本文链接：https://blog.youkuaiyun.com/weixin_57649833/article/details/120675432

本文介绍了如何利用JavaScript的URL.createObjectURL方法实现本地图片、视频和音频的预览功能。通过监听input[type=file]的选择事件，获取文件并创建URL，设置到img或video元素的src属性，从而达到预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前碰到用户头像上传并在上方预览的需求，当时没太搞明白，直接找了插件，今天想弄一个简化的本地视频播放和音频播放的小页面，选择本地视频文件实现同步播放，用到了URL.createObjectURL（），就试了一下input选择图片也可以实现预览需求。同样的视频和音频的预览也可以用这种方式。

  <img src="" alt="" class="img" />
    <input type="file" class="input" onchange="inputChange()" />
    <script>
      let img = document.querySelector(".img");
      let input = document.querySelector(".input");
      function inputChange() {
        let file = input.files[0];
        let url = URL.createObjectURL(file);
        img.src = url;
      }
    </script>