FileReader与URL.createObjectURL实现图片、视频上传预览

之前做图片、视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览。实际上这只是文件"上传后再预览",这既浪费了用户的时间,也浪费了不可轻视的流量。

最近上网查资料才知道其实可以很轻松地实现"上传前预览"。实现方法有两种:FileReader和URL.createObjectURL。

关于FileReader的讲解可以看这里

关于URL.createObjectURL方法的讲解和应用可以看这里

IE10+

直接上代码:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preview</title>
    <style>
        * {
            box-sizing: border-box;
        }
        .section {
            margin: 20px auto;
            width: 500px;
            border: 1px solid #666;
            text-align: center;
        }
        .preview {
            width: 100%;
            margin-top: 10px;
            padding: 10px;
            min-height: 100px;
            background-color: #999;
        }
        .preview img,
        .preview video {
            width: 100%;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
</head>
<body>
    <div class="section">
        <p>方案1-FileReader</p>
        <input class="upload" type="file" onchange=onUpload1(this.files[0])>
        <div class="preview preview1"></div>
    </div>

    <div class="section">
        <p>方案2-createObjectURL</p>
        <input class="upload" type="file" onchange=onUpload2(this.files[0])>
        <div class="preview preview2"></div>
    </div>

    <script>
        // 方式一:FileReader
        function onUpload1 (file) {
            var fr = new FileReader();
            fr.readAsDataURL(file);  // 将文件读取为Data URL

            fr.onload = function(e) {
                var result = e.target.result;
                if (/image/g.test(file.type)) {
                    var img = $('<img src="' + result + '">');
                    $('.preview1').html('').append(img);
                } else if (/video/g.test(file.type)) {
                    var vidoe = $('<video controls src="' + result + '">');
                    $('.preview1').html('').append(vidoe);
                }
            }
        }

        // 方式二:createObjectURL(推荐)
        function onUpload2 (file) {
            
            var blob = new Blob([file]), // 文件转化成二进制文件
                url = URL.createObjectURL(blob); //转化成url
            // 或者直接:var url = window.URL.createObjectURL(file);

            if (/image/g.test(file.type)) {
                var img = $('<img src="' + url + '">');
                img[0].onload = function(e) {
                    URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象
                }
                $('.preview2').html('').append(img);
            } else if (/video/g.test(file.type)) {
                var video = $('<video controls src="' + url + '">');
                $('.preview2').html('').append(video);
                video[0].onload = function(e) {
                    URL.revokeObjectURL(this.src);  // 释放createObjectURL创建的对象
                }
            }
        }
    </script>
</body>
</html>

一个视频编码成dataUrl放到内存浏览器肯定崩溃,用createObjectURL生成的url应该是指向硬盘中的视频而不用加载到内存

相关推荐
脑子缺根弦1 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
肥or胖10 小时前
【FFmpeg 快速入门】本地播放器 项目
开发语言·qt·ffmpeg·音视频
DogDaoDao13 小时前
GitHub开源轻量级语音模型 Vui:重塑边缘智能语音交互的未来
大模型·github·音视频·交互·vui·语音模型·智能语音
张海森-1688201 天前
视频码率是什么?视频流分辨率 2688x1520_25fps采用 h264格式压缩,其码率为
音视频
DogDaoDao2 天前
视频HDR技术全解析:从原理到应用的深度探索
音视频·hdr·sdr·视频渲染·hdr10·视频hdr技术标准·人眼视觉系统
IoT砖家涂拉拉2 天前
萌宠语聊新模板!借助On-App AI降噪与音频处理技术,远程安抚宠物更轻松、更安心!
人工智能·ai·app·音视频·智能家居·智能硬件·宠物
AI视觉网奇2 天前
截取视频 截取mp4 视频缩放
音视频
DogDaoDao2 天前
2025年 GitHub 主流开源视频生成模型介绍
人工智能·深度学习·开源·大模型·github·音视频·视频生成
todoitbo3 天前
docker搭建freeswitch实现点对点视频,多人视频
docker·容器·音视频·freeswitch·视频聊天
菜包eo3 天前
3种添加视频水印的加密方式,守护视频安全!
安全·音视频