之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给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. 2019-2020-3 20174318张致豪《网络对抗技术》Exp2 后门原理与实践

    Exp2 后门原理与实践 前期准备 一.实验目标与基础知识 1.1 实践目标 使用netcat获取主机操作Shell,cron启动 使用socat获取主机操作Shell,任务计划启动 使用MSF  m ...

  2. .NET实现一个简单的IOC容器

    目录 1.主要细节 2.具体示例 参考及示例代码下载 shanzm-2020年3月17日 20:06:01 1.主要细节 使用反射程序集的方式获取对象的类型 通过反射的方式获取指定类型的的所有公共属性 ...

  3. JS的3种核心设计模式

    一.单例模式 1.保证一个类仅有一个实例,并提供一个访问它的全局访问点 2.设计思路:如果存在,不创建,直接返回,不存在才创建. 在类的constructor方法里添加一个判断条件属性,并且让创建的实 ...

  4. Java多线程并发03——在Java中线程是如何调度的

    在前两篇文章中,我们已经了解了关于线程的创建与常用方法等相关知识.接下来就来了解下,当你运行线程时,线程是如何调度的.关注我的公众号「Java面典」了解更多 Java 相关知识点. 多任务系统往往需要 ...

  5. C++基础 学习笔记之一：源代码的格式化

    C++基础 学习笔记之一:源代码的格式化 1. 源代码中的标记与空白 C++中的语句是以分号表示语句的结束.在C++中空格和回车以及制表符均为相同作用,即三者通常可以互相替代. 例如可以将一个简单的m ...

  6. 关于WDK开发内核签名之WHQL签名认证流程简介

    WHQL简介: WHQL全称Windows Hardware Quality Labs testing(Windows硬件质量实验室测试)它是对所涉及的第三方硬件或软件进行一系列测试,然后提交测试的日 ...

  7. 【Weiss】【第03章】练习3.9：大整数运算包

    [练习3.9] 编写任意精度的整数运算包,要求使用类似多项式运算的方法.计算24000内数字0到9的分布.

  8. channel的基本使用

    1.管道分类 读写管道 只读管道 只写管道 缓冲通道 :创建时指定大小(如果不指定默认为非缓冲通道) 2.正确使用管道 管道关闭后自能读,不能写 写入管道不能超过管道的容量cap,满容量还写则会阻塞 ...

  9. Natas14 Writeup（sql注入、sql万能密码）

    Natas14: 是一个登录页面.源码如下. if(array_key_exists("username", $_REQUEST)) { $link = mysql_connect ...

  10. 推荐三款好用的JSON格式化工具——JSON-handle & HiJson & JSTool

    工具一:JSON-handle JSON-Handle是一款谷歌浏览器插件. 1.访问http://jsonhandle.sinaapp.com/下载 2.打开Chrome浏览器的扩展程序(访问chr ...