Web 利用H5中的FileReader实现上传文件的即时预览_使用 filereader 上传文档后预览-优快云博客

本文链接：https://blog.youkuaiyun.com/Friends233/article/details/104226685

本文通过H5的FileReader接口，详细介绍了如何实现图片、音乐和视频的上传前预览功能，提供了一种增强用户体验的方法。

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

部分效果展示

参考文档

图片上传的预览

<form>
    <input type="file" id="myFile" onchange="getData();">
</form>
<img src="">
<script>
     function getData() {
         var reader = new FileReader();
         var file = document.querySelector("#myFile").files;
         reader.readAsDataURL(file[0]);
         reader.onload = function(){ // 文件读取完成时触发
             document.querySelector("img").src = reader.result;
         };
     }
</script>

音乐的上传和预览

<form>
    <input type="file" id="music" onchange="getMusic();">
</form>
<audio src="" controls>
</audio>
<script>
    function getMusic() {
        var reader = new FileReader();
        var file = document.querySelector("#music").files;
        reader.readAsDataURL(file[0]);
        reader.onload = function(){ // 文件读取完成时触发
            console.log(reader.result);
            document.querySelector("audio").src = reader.result;
        };
    }
</script>

视频的上传和预览

<form>
    <input type="file" id="video" onchange="getVideo();">
</form>
<video src="" controls>

</video>
<script>
    function getVideo() {
        var reader = new FileReader();
        var file = document.querySelector("#video").files;
        reader.readAsDataURL(file[0]);
        reader.onload = function(){ // 文件读取完成时触发
            console.log(reader.result);
            document.querySelector("video").src = reader.result;
        };
    }
</script>