之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给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. 20 本地SQL查询

    Spring Data JPA同样也支持sql语句的查询 //nativeQuery : 使用本地sql的方式查询 @Query(value="select * from customer& ...

  2. Mysql（Mariadb）之SET语法分析以及系统变量和用户变量分析（英文&中文）（转载）

    SET Syntax SET variable_assignment [, variable_assignment] ... variable_assignment: user_var_name = ...

  3. 这些MongoDB的隐藏操作你真的都掌握了吗？反正我是刚知道

    背景 最近公司系统还原用户时偶尔会出现部分用户信息未还原成功的问题,最为开发人员,最头疼的不是代码存在bug,而是测试发现了bug,但一旦我去重现,它就不见了.Are you kidding me? ...

  4. 痞子衡嵌入式：恩智浦SDK驱动代码风格检查工具预览版

    大家好,我是痞子衡,是正经搞技术的痞子. 接上文 <恩智浦SDK驱动代码风格.模板.检查工具> 继续聊,是的,过去的三天里我花了一些时间做了一个基于 PyQt5 的 GUI 工具,可以帮助 ...

  5. echarts legend文字配置多个颜色（转）

    困扰很久的问题终于解决了 oh yea! echarts legend文字配置多个颜色legend: {data: [{name:‘直接访问’,icon : ‘circle’,textStyle: { ...

  6. 【Elasticsearch】查询并删除匹配文档之_delete_by_query

    思路:先查询确认,后精准删除 假设我想删除title是"小明今晚真的不加班"这条记录,先查看一下现有的记录: (不加班不好吗?为什么要删除呢?) tips:可以使用match_ph ...

  7. HTTP请求中Get和Post请求的区别？

    分类 Get的请求方式 1.直接在浏览器地址栏输入某个地址. 2.点击链接地址. 3.表单的默认提交方式或者设置为method="get". Post的请求方式 1.设置表单的me ...

  8. 从零开始学习R语言（四）——数据结构之“数组（Array）”

    本文首发于知乎专栏:https://zhuanlan.zhihu.com/p/60141207 也同步更新于我的个人博客:https://www.cnblogs.com/nickwu/p/125677 ...

  9. 解析源码，彻底弄懂HashMap（持续更新中）

    为啥突然想着看HashMap源码了? 无意间看到有人说HashMap能考验Java程序员的基本功,之前我作为面试官帮公司招人的时候偶尔问起HashMap,大部分人回答基本都会用,且多数仅停留在put, ...

  10. [转]【maven】解决Missing artifact jdk.tools:jdk.tools:jar:1.6

    解决在pom.xml文件中出现的Missing artifact jdk.tools:jdk.tools:jar:1.6问题 <dependency> <groupId>jdk ...