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

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

关于FileReader的讲解可以看这里

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

demo地址

直接上代码：

<!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</p>

        <input class="upload" type="file" onchange=onUpload1(this.files[0])>

        <div class="preview preview1"></div>

    </div>

    <div class="section">

        <p>方案2</p>

        <input class="upload" type="file" onchange=onUpload2(this.files[0])>

        <div class="preview preview2"></div>

    </div>

    <script>

        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);

                }

            }

        }

        function onUpload2 (file) {

            var blob = new Blob([file]), // 文件转化成二进制文件

                url = URL.createObjectURL(blob); //转化成url

            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>复制代码

demo截图：

方案1、2 上传图片

方案1 上传视频

方案2 上传视频

可以看出FileReader和URL.createObjectURL都能完美的实现图片的预览，但对于视频的上传，FileReader就不行了，浏览器立马崩溃了。。。，然而URL.createObjectURL方法却完美实现。

关于二者的具体区别在网上一时没查清楚，但总体感觉URL.createObjectURL比FileReader性能更好一些。有什么说错的地方还望指正。

FileReader与URL.createObjectURL实现图片、视频上传前预览的更多相关文章

  1. JavaScript 图片的上传前预览（兼容所有浏览器）

    功能描述 通过 JavaScript 实现图片的本地预览(无需上传至服务器),兼容所有浏览器(IE6&IE6+.Chrome.Firefox). 实现要点   ● 对于 Chrome.Fire ...

  2. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  5. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  9. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

随机推荐

  1. React官方脚手架不支持less问题解决

    create-react-app是由React官方提供,并推荐构建React单页应用程序的最佳方法,但是默认不支持less,需要手动集成: 1,必须手动安装less npm install less ...

  2. Resource interpreted as Stylesheet but transferred with MIME type text/html： css失效

    异常信息: Resource interpreted as Stylesheet but transferred with MIME type text/html: 可能原因 过滤器或者某个地方对所有 ...

  3. Alibaba Sentinel 限流与熔断初探(技巧篇)

    目录 1.Sentinel 是什么 ?主要能解决什么问题? 2.限流与熔断的使用场景 3.Sentinel 源码结构 4.在 IntelliJ IDEA 中运行 Sentine Demo 温馨提示:源 ...

  4. 高可用Keepalived+LVS搭建流程

    本流程搭建1个master,1个backup节点的Keepalived,使用lvs轮询2个节点的服务. 一.使用版本 CentOS 7.7 Keepalived 1.3.5 ipvsadm 1.27( ...

  5. SpiningUP 强化学习 中文文档

    2020 OpenAI 全面拥抱PyTorch,  全新版强化学习教程已发布. 全网第一个中文译本新鲜出炉:http://studyai.com/course/detail/ba8e572a 个人认为 ...

  6. Logback，SLF4J，Log4J2。了解它们并学习如何使用。(翻译)

    背景 如果您正在或在任何Java项目上工作,则可能已记录了一些debug,error或info语句以进行调试或跟踪.通过将库记录到磁盘或其他某种介质上的文件中来写这些语句. 日志记录是任何项目的关键方 ...

  7. 蓝桥杯vip题阶乘计算

    蓝桥杯vip题阶乘计算 详细题目 输入一个正整数n,输出n!的值. 其中n!=123*-*n. 算法描述 n!可能很大,而计算机能表示的整数范围有限,需要使用高精度计算的方法.使用一个数组A来表示一个 ...

  8. 使用AJAX实现用户名的唯一性校验（注册界面）-JAVA（新手）

    (1)实现用户名的唯一性校验 所需要准备的: Servlet 注册界面的JSP 接口和实现类 所需要的接口和实现类: 接口: /* * 用户注册 * 账号的唯一性校验,需要传参(username) * ...

  9. CF1324A Yet Another Tetris Problem 题解

    原题链接 简要题意: 再简要一波: 每次可以把一个数增加 \(2\),问最后能不能让所有数相等.(也就是抵消掉) 什么?题意变成这样子还做个啥? 你会发现,必须所有数的奇偶性都相同,才可以:反之就不可 ...

  10. [源码分析] 从实例和源码入手看 Flink 之广播 Broadcast

    [源码分析] 从实例和源码入手看 Flink 之广播 Broadcast 0x00 摘要 本文将通过源码分析和实例讲解,带领大家熟悉Flink的广播变量机制. 0x01 业务需求 1. 场景需求 对黑 ...