之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给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. Flutter环境搭建以及快捷命令

    Flutter环境搭建 配置环境变量 用户变量 FLUTTER_STORAGE_BASE_URL : https://storage.flutter-io.cn PUB_HOSTED_URL : ht ...

  2. 盘点Mac上搭建本地WebServer的几种方式

    第一种: 通过Nginx搭建本地WebServer 安装nginx brew install nginx 安装完后在终端输入nginx指令,启动nginx查看效果 确定安装好之后,在根目录创建一个文件 ...

  3. 免ROOT卸载手机自带软件详细教程

    一.准备条件 1.电脑一台 2.手机一部 3.WiFi 二.下载所需资源 微信扫码进入搜索,选择安卓软件卸载工具 根据图中提示,按照自己的系统进行下载 三.下载完后解压(以Windows为例),解压后 ...

  4. 基于Linux Lite 4.8制作“Windows 12 Lite”正式发布

    值得注意的是,这款Windows 12 Lite的宣传标语将矛头直指Windows 10,声称不会迫使用户更新.不会存在病毒或恶意软件.启动速度比Win 10快3倍.提供8万多款优质软件.允许与Win ...

  5. 如何安装vue-devtool调试工具

    1.从git上下载工具压缩包,github下载地址:https://github.com/vuejs/vue-devtools: 2.打开cmd,切换到下载的文件目录下:npm install---- ...

  6. Java 内存模型都不会，就敢在简历上写熟悉并发编程吗

    从 PC 内存架构到 Java 内存模型 你知道 Java 内存模型 JMM 吗?那你知道它的三大特性吗? Java 是如何解决指令重排问题的? 既然CPU有缓存一致性协议(MESI),为什么 JMM ...

  7. Spring Cloud - Nacos注册中心入门单机模式及集群模式

    近几年微服务很火,Spring Cloud提供了为服务领域的一整套解决方案.其中Spring Cloud Alibaba是我们SpringCloud的一个子项目,是提供微服务开发的一站式解决方案. 包 ...

  8. Java并发编程之CAS第一篇-什么是CAS

    Java并发编程之CAS第一篇-什么是CAS 通过前面几篇的学习,我们对并发编程两个高频知识点了解了其中的一个—volatitl.从这一篇文章开始,我们将要学习另一个知识点—CAS.本篇是<凯哥 ...

  9. Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementation and computational analysis DIA技术在肠道宏蛋白质组研究中的方法实现和数据分析 （解读人：闫克强）

    文献名:Data-independent acquisition mass spectrometry in metaproteomics of gut microbiota - implementat ...

  10. DRF之restful规范、Postman接口测试

    一. DRF简介 Django REST框架是一个功能强大且灵活的工具包,用于构建Web API. 使用REST框架的一些原因: 该网站可浏览API是你的开发人员一个巨大的可用性胜利. 身份验证策略包 ...